王宇凡_20210115王宇凡
知识点总结
JavaScript
用JavaScript实现全选反选以及结算功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>check</title>
</head>
<body>
<input type="checkbox" name="item" value=1/>A
<input type="checkbox" name="item" value=1/>B
<input type="checkbox" name="item" value=1/>C
<input type="checkbox" name="item" value=1/>D
<input type="checkbox" name="item" value=1/>E
<input type="button" name="checkAll" onclick="checkAll()" value="全选/全不选"/>
<input type="button" name="checkother" value="反选" onclick="co()" id="co"/>
<input type="button" name="over" value="结算" onclick="over()">
<div id="overDiv" style="color: red; font-size: 20px;"></div>
<script type="text/javascript">
function checkAll(){
var items = document.querySelectorAll("[name=item]");
// items.checked = "true";
var a = 0 ;
for(var i = 0 ;i<items.length;i++){
// var c = items.checked;
if(items[i].checked){
a++;
if(a==5){
co();
}
}else{
bb();
}
}
}
function bb(){
var items = document.querySelectorAll("[name=item]");
// items.checked = "true";
for(var i = 0 ;i<items.length;i++){
// var c = items.checked;
items[i].checked = "checked";
}
}
function over(){
var items = document.querySelectorAll("[name=item]");
var result = 0 ;
for(var i = 0 ;i<items.length;i++){
// console.log(items);
if(items[i].checked){
result += parseInt(items[i].value);
}
}
var div = document.getElementById("overDiv");
div.innerText = parseInt(result);
}
function co(){
var items = document.querySelectorAll("[name=item]");
// items.checked = "true";
for(var i = 0 ;i<items.length;i++){
items[i].checked = !items[i].checked ;
}
}
</script>
</body>
</html>
利用复选框(checkbox)的checked来获取状态，true为选择，false为未选择。经过循环判断实现此功能
利用浏览器F12调试JavaScript代码
Console
控制台页面，在里面可以看到页面加载、响应中产生的错误（红色），警告（黄色）。如果HTML页面有语法或其他错误，可以到这边查看。
Console.log()
利用Console.log()，可以在页面加载或脚本执行时，在控制台打印输出。
比如我的HTML页面加载时，里面有一行代码Console.log("页面加载中....")，那么，页面加载时就会在控制台显示：页面加载中....
控制台可以运行JavaScript代码
比如我想测试一下js中Date类的使用，包括如何初始化，如何赋值，如何转换格式等。那么我只需要在控制台区域书写相关脚本即可。
调试源代码
在浏览器中，我们还可以使用Source界面，对前端的源码进行调试。点击代码左侧（带有行号）处，就可以建立一个断点，当执行到这段代码时，就会触发断点，我们可以看到变量运行中的值。
虽然在这个页面，我们可以给HTML、CSS、JavaScript都打上断点，但只有JavaScript的断点是起作用的。
个人心得
经过对js的学习和代码调试的训练。可以有效的编写js代码和调试，对今后的HTML页面的js脚本编写很有帮助。希望在以后的页面中，可以根据自己的需求，多写一些对页面动态效果有帮助的js代码。多利用浏览器来调试自己的代码，利用断点来找出bug。
近期评论