前端的 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;    // 语句 4document.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>