原生js倒计时

指定时间倒计时

春节临近 今天就搞个放假倒计时吧
时间可以在以下随意更改
在这里插入图片描述

html

<style>
    #haha{
        font-size: 70px;
        position: fixed;
        top: 30px;
        left: 100px;
    }

</style>
<title>放假倒计时</title>
<div id="haha">
    <p class="shanshuo" style="color: black">....................................................................</p>
    <div id="lala">
    距放假还有:
    <span id='daya'></span>天
    <span id='hoursa'></span>小时
    <span id='minua'></span>分
    <span id='secoa'></span>秒
    <span id='secoas'></span>
    </div>
    <p class="shanshuo" style="color: black">....................................................................</p>
</div>

js

<script>
    function time(){
        // 当前时间
        var nt=new Date();
        // 指定时间
        var lt=new Date(2019,0,26,15,30,0);
        // 计算两个时间差
        var diff=lt.getTime()-nt.getTime();
        // 计算天数
        var  days= parseInt(diff/(24*60*60*1000));
        // document.write(days)
        // 计算完天数剩余的毫秒数
        diff=diff%(24*60*60*1000);
        // 计算小时
        var hour=parseInt(diff/(60*60*1000));
        // 计算分钟
        diff=diff%(60*60*1000);
        var minutes=parseInt(diff/(60*1000));
        // 计算分钟后的毫秒数
        diff=diff%(60*1000);
        // 计算秒
        var sec=parseInt(diff/(1000));
        diff=parseInt(diff%(1000));
        document.getElementById('daya').innerHTML=days;
        document.getElementById('hoursa').innerHTML=hour;
        document.getElementById('minua').innerHTML=minutes;
        document.getElementById('secoa').innerHTML=sec;
        document.getElementById('secoas').innerHTML=diff;
    }
    time();
    setInterval(function () {
        time();
    },100);

    // 以下为字体闪烁
    var lala=document.getElementById('lala');
    var s=document.getElementsByTagName('p')[0];
    var s1=document.getElementsByTagName('p')[1];
    var timer;
    timer=setInterval(function(){
        var b = parseInt(Math.random()*255);
        var c = parseInt(Math.random()*255);
        var d = parseInt(Math.random()*255);
        s.style.color='rgb('+b+','+c+','+d+')';
        s1.style.color='rgb('+b+','+c+','+d+')'
    },100);
    var timer1;
        timer1=setInterval(function(){
        var b = parseInt(Math.random()*255);
        var c = parseInt(Math.random()*255);
        var d = parseInt(Math.random()*255);
        lala.style.color='rgb('+b+','+c+','+d+')'
    },200)
</script>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值