我很不乖

JS页面计时器插件-正反计时
之前一直想做个页面计时器放在博客里。正好最近有空就弄一个吧。效果实现方式js函数计算完后替换到静态div。纪念日写...
扫描右侧二维码阅读全文
24
2019/02

JS页面计时器插件-正反计时

之前一直想做个页面计时器放在博客里。正好最近有空就弄一个吧。


效果

fxi90-cddxd.gif

实现方式

js函数计算完后替换到静态div。

纪念日写法

<script>
    function ShowCountDown(year,month,day,divname)
    {
        var now = new Date();
        var endDate = new Date(year, month, day);
        var leftTime=endDate.getTime()-now.getTime();
        var dd = parseInt(leftTime / -1000 / 60 / 60 / 24, 10);//计算剩余的天数
        var hh = parseInt(leftTime / -1000 / 60 / 60 % 24, 10);//计算剩余的小时数
        var mm = parseInt(leftTime / -1000 / 60 % 60, 10);//计算剩余的分钟数
        var ss = parseInt(leftTime / -1000 % 60, 10);//计算剩余的秒数
        dd = checkTime(dd);
        hh = checkTime(hh);
        mm = checkTime(mm);
        ss = checkTime(ss);//小于10的话加0
        var cc = document.getElementById(divname);
        cc.innerHTML = "我们共同度过了:" + dd + "天" + hh + "小时" + mm + "分" + ss + "秒";
    }
    function checkTime(i)
    {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
    window.setInterval(function(){ShowCountDown(2010,01,01,'countdown');}, 1000);
</script>

此处值得注意的是,以上代码只能计算过去的一个日期时间到现在的现在的中间过去了多久。

如果想要使用倒计时的话我们可以很灵活的改变其中一个计算值的符号即可,小学数学内容emmmmm。


具体代码如下:

倒计时写法

<script>
    function ShowCountDown(year,month,day,divname)
    {
        var now = new Date();
        var endDate = new Date(year, month, day);
        var leftTime=endDate.getTime()-now.getTime();
        var dd = parseInt(leftTime / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
        var hh = parseInt(leftTime / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
        var mm = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟数
        var ss = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
        dd = checkTime(dd);
        hh = checkTime(hh);
        mm = checkTime(mm);
        ss = checkTime(ss);//小于10的话加0
        var cc = document.getElementById(divname);
        cc.innerHTML = "我们共同度过了:" + dd + "天" + hh + "小时" + mm + "分" + ss + "秒";
    }
    function checkTime(i)
    {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
    window.setInterval(function(){ShowCountDown(2010,01,01,'countdown');}, 1000);
</script>

插入网页方式

ps:在typecho的handsome主题中,建议把js放在“自定义输出body 尾部的HTML代码”下。调用代码放在“初级设置”中的“博客公告消息”下。

以上JS写完了,其实并没有全部完成。我们发现变量虽然建立了,但是并没有在html中应用变量,等于没有调用。我们在Body中添加如下代码实现调用。
方法一:

<i id="countdown" style="font-style:normal"></i>

这里需要注意的是,“i”标签如果不添加style默认是斜体,所以我们要给这个i定义font样式

方法二:

<div id="countdown"></div>

典型的div框调用,不过多阐述

以上就是所有的内容了

Last modification:June 17th, 2019 at 11:09 am
If you think my article is useful to you, please feel free to appreciate

5 comments

  1. 七啊  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 79.0.3945.130(Google Chrome 79.0.3945.130) 71

    您好,我想问下,在每篇文章下调用要怎么改呢?因为倒计时的时间都不一样,结束日期不一致。
    所以应该怎么修改呢?期盼回复。

  2. 我很不乖  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142) 71

    略略略( ๑´•ω•) "(ㆆᴗㆆ)

  3. 南京扛把子  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103) 71

    我放在自定义JavaScript里面怎么不生效呢。。。

    1. 我很不乖  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103) 71
      @南京扛把子

      需要加在“自定义输出body 尾部的HTML代码”这个里面。OωO

  4. 我很不乖  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.119(Google Chrome 72.0.3626.119) 71

Leave a Comment