Blogger Information
Blog 13
fans 0
comment 0
visits 12209
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
倒计时与按时间随机换色案例,3.28作业
小毛的博客
Original
798 people have browsed it
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
    *{margin: 0;padding: 0;}
    
    #myCircle{margin: 200px auto;width: 300px;height: 300px;border-radius: 50%;text-align: center;}
    #timeLeft{margin:0 auto;line-height: 300px;font-size: 25px;font-family: black;}
</style>
</head>

<body>
    <div id="myCircle">
        <div id="timeLeft">
            
        </div>
    </div>

</body>
    <script>
    var int = window.setInterval(doSomeThing,1000);
    function doSomeThing(){    
        // 随机变色
        var red, green, blue, transParent, myColor;
        red=Math.floor(Math.random()*256);
        green=Math.floor(Math.random()*256);
        blue=Math.floor(Math.random()*256);
        transParent = 1-Math.random(); 
        myColor = "rgba("+red+","+green+","+blue+","+transParent+")";
        document.getElementById('myCircle').style.background = myColor;

        // 倒计时
        var timer = new Date();
        myMin = 60 - timer.getMinutes();
        mySec = 60 - timer.getSeconds();
        document.getElementById('timeLeft').innerHTML="倒计时&nbsp|&nbsp&nbsp&nbsp&nbsp"+myMin+"&nbsp&nbsp分"+mySec+"&nbsp&nbsp秒";        
    }

    </script>
</html>

-------------------------------------------

运行效果图

-------------------------------------------QQ截图20190401134611.jpg




总结:

1、Math.random()方法的返回值含0不含1,如果要含1不含0,则用1减去方法的返回值;

2、要取到【M,N】(均为正整数),要做如下计算:Math.floor(Math.random()*(N-M+1)+M)

3、window.setInterval(代码,间隔),如果代码是一个方法或函数,无需使用双引号

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post