张宇_20210115张宇
知识点总结
1、BOM&DOM
实例1、实现都选与都不选
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="checkbox" name="item" value="60" />a
<input type="checkbox" name="item" value="60" />b
<input type="checkbox" name="item" value="60" />c
<input type="checkbox" name="item" value="60" />
<input type="checkbox" name="item" value="60" />e
<hr />
<input type="checkbox" id="all" onclick="checkall()">全选/全不选</input>
<button type="button" onclick="reverse()">反选</button>
<button type="button" onclick="sum()">结算</button>
<p>总计：<span id="price">0</span>元</p>
<script>
var items = document.querySelectorAll("[name=item]");
function checkall(){
document.querySelector("#all");
for(var i=0;i<items.length;i++){
var cur = items[i];
cur.checked=all.checked;
}
}
function reverse(){
for(i=0;i<items.length;i++){
var cur = items[i];
cur.checked = !cur.checked;
}
}
function sum(){
var sum=0;
for(i=0;i<items.length;i++){
var cur = items[i];
if(cur.checked){
sum +=parseFloat(cur.value);
}
}
document.querySelector("#price").innerText = sum;
}
</script>
</body>
</html>
实例2、实现心形的鼠标点击方式
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var html=document.querySelector("html");
html.addEventListener("click",heart,false);
function heart(e){
var fontSize=16;
var left=e.clientX - fontSize/2;
var top=e.clientY - fontSize/2;
var b=document.createElement("b");
b.innerText="❤";
b.style="font-size: " + fontSize + "px;color" + randomColor() + ";position:absolute;left:"+ left + "px;top:" + top + "px;opacity:1;";
document.body.appendChild(b);
var timer=setInterval(function(){
var top=b.style.top.replace("px","");
b.style.top=top - 1 + "px";
b.style.opacity -= 0.05;
if(b.style.opacity < 0){
document.body.removeChild(b);
clearInterval(timer);
}
}, 100);
}
function randomColor(){
return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")";
}
</script>
</body>
</html>
2、JavaScript
注意：JavaScript与java没有关系！另外JavaScript严格区分大小写，一般使用小写。JavaScript一般写在HTML内部,在 <script>标签中编写，可以放在<body>和<head>部分中。
心得体会
今天的学习过程中遇到的困难挺多的，主要是有关表格背景颜色那一部分，另外印象挺深的就是关于 鼠标点击时会出现爱心那一部分，感觉挺有趣的，并且成功实现了，最后就是关于JavaScript的一些基本知识掌握的还行。
点赞
评论留言