<!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的使用。parseInt给每一种颜色的几率会相对均等一些。附上本人的效果图haha：
