用js实现简单的满屏跳动的心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>闪亮的心心</title>
<style>
input {
background-color: rgb(146, 146, 231);
border: 1px dotted yellow;
color: aliceblue;
}
#dv {
border: 2px dotted yellow;
background-color: black;
}
span{
position: absolute;
font-size: 20px;
}
.cls{
background-color: #000;
}
</style>
</head>
<body>
<input type="button" value="开关灯" id="off" class="cls">
<input type="button" name="" id="star" value="星辰大海">
<div id="dv">
</div>
<script src="common.js"></script>
<script>
document.getElementById("off").onclick=function(){
document.body.className=document.body.className!="cls"?"cls":"";
}
document.getElementById("star").onclick = function () {
setInterval(function () {
document.getElementById("dv").innerHTML="<span>❤</span>";
var span=document.querySelector("span");
var dv=document.getElementById("dv");
for(i=0;i<100;i++){
var sp= span.cloneNode(true);
dv.appendChild(sp);
var r = parseInt(Math.random() *256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
var y = parseInt(Math.random() * 1240);
var x = parseInt(Math.random() *600);
document.getElementById("dv").firstElementChild.style.color="rgb("+r+","+g+","+b+")";
document.getElementById("dv").firstElementChild.style.left = y + "px";
document.getElementById("dv").firstElementChild.style.top = x + "px";
}
},500);
};
</script>
</body>
</html>
总结一下,这个简单的效果,主要用到的知识点有
- 为按钮注册点击事件
onclick
。 - 定时器
setInterval(函数,毫秒值)
l的使用。 - 克隆节点(想要克隆的那个节点 . cloneNode(布尔值);false: 代表浅复制,只会单纯的复制一层节点。true:代表深复制,恢复制想要复制的节点以及他包含的所有。)
- 随机颜色的使用,RGB分别去不同的随机数,就可以实现随机色,用
parseInt
给每一种颜色的几率会相对均等一些。 - 随机位置,用两个随机数可以设置元素的left和top。
- 最后一定要注意要动的元素一定要脱离标准流吖。
附上本人的效果图haha:
更多推荐
用js实现简单的满屏跳动的心
发布评论