满屏小心心

2023-10-04 09:29:10

<!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>

码农公寓

相关文章