博客列表 >倒计时与按时间随机换色案例,3.28作业

倒计时与按时间随机换色案例,3.28作业

小毛的博客
小毛的博客原创
2019年04月01日 13:59:57799浏览
<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(代码,间隔),如果代码是一个方法或函数,无需使用双引号

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议