满屏小心心
<!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="ls" style="margin-left: 700px;margin-top: 100px">
<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() * 1500);
var x = parseInt(Math.random() *650);
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>
