JS的基本输入和输出：

最新推荐文章于 2024-07-06 19:37:22 发布

QH-fighting

最新推荐文章于 2024-07-06 19:37:22 发布

阅读量631

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qianhua521/article/details/53164576

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.

2.(1)alert // 这是一个js 的内置函数（函数表示一个功能），它用来在网页上个弹出一个文本框，提示用户一些信息，我们习惯叫他弹出框或者警示框
// alert("你将要进入一个神奇的js世界！");
// alert("你将要进入一个又糟糕的js世界！");

(2)console.log // alert会覆盖整个浏览器的所有页面，体验不佳，如果想做后台的输出

3.button按钮点击事件： <body>

</body>

......

// 找到button
var btn = document.getElementById("submit");
// 给btn这个按钮添加一个点击事件，事件需要绑定一个函数
btn.onclick = function(){
var user = document.getElementById("user");
alert("不好意思 >>>>"+user.value+"<<<< 我已经有工作了！");
}

</script>

结果为：

练一练：完成下面的练习：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<style></style>
</head>
<body>

<input type="text" placeholder="数字1" id="num1">
<input type="text" placeholder="数字2" id="num2">
<input type="button" value="+" id="add">
<input type="button" value="-" id="minus">
<input type="button" value="x" id="multip">
<input type="button" value="÷" id="div">
<input type="text" placeholder="结果" id="result">

</body>


<script>

// 获取到所有的按钮
var add = document.getElementById("add");
var minus = document.getElementById("minus");
var multip = document.getElementById("multip");
var div = document.getElementById("div");

// 给按钮添加事件
add.onclick = function(){
var n1 = document.getElementById("num1").value;
var n2 = document.getElementById("num2").value;
// n1 = n1.value;
// n2 = n2.value;
console.log(n1+n2);
}

minus.onclick = function(){
var n1 = document.getElementById("num1").value;
var n2 = document.getElementById("num2").value;
// n1 = n1.value;
// n2 = n2.value;
console.log(n1-n2);
}

multip.onclick = function(){
var n1 = document.getElementById("num1").value;
var n2 = document.getElementById("num2").value;
// n1 = n1.value;
// n2 = n2.value;
console.log(n1*n2);
}

div.onclick = function(){
var n1 = document.getElementById("num1").value;
var n2 = document.getElementById("num2").value;
// n1 = n1.value;
// n2 = n2.value;
console.log(n1/n2);
}

</script>

</html>