前端的 js

js 点击按钮修改文字

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<h2>Head 中的 JavaScript</h2>

<p id="demo">一个段落。</p>

<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
//修改 id（demo） 的数据
    document.getElementById("demo").innerHTML = "你好小周。";
}
</script>
</body>
</html>

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

js 计算

<!DOCTYPE html>
<html>
<body>

<h2>我的第一张网页</h2>
<p>我的第一个段落。</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>我的第一张网页</h2>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

计算结果

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
//设置变量 但是没有值  下边可以更改遍历值
var x, y, z;  // 语句 1
x = 22;        // 语句 2
y = 11;        // 语句 3
z = x + y;    // 语句 4

document.getElementById("demo").innerHTML =
"结果 的值是" + z + "---"+y +"。";  

</script>

</body>
</html>

点击出变量

<!DOCTYPE html>
<html>
<body>


<button type="button" onclick="myFunction()">点击我！</button>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
function myFunction() {
    document.getElementById("demo1").innerHTML = "Hello Kitty.";
    document.getElementById("demo2").innerHTML = "How are you?";
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 变量</h2>

<p>在本例中，x 被定义为变量。然后 x 被赋值 7：</p>

<p id="demo"></p>

<script>
var x;
x = 7;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>