基于Javascript实现倒计时功能

前端之家收集整理的这篇文章主要介绍了基于Javascript实现倒计时功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例实现一个倒计时功能. 倒计时功能,用在项目的发布时间,或者某个活动做倒计时等等的突出时间功能的方面. 界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(O(∩_∩)O哈哈~).

代码名称

<Meta charset="UTF-8"> 倒计时实现
  • :
  • :
  • :
  • 下面做Javascript的讲解了.

    首先设定一个结束时间,时间通过new Date()来进行创建. 这样才能够计算倒计时的时间.

    然后就是换算规则,规则的换算是常理了.

    再次就是通过setInterval来计算当前时间的对比,因为时间在一秒一秒的过去,当前时间的获取就在setInterval中进行计算. 当然还得将计算出的结果显示到界面上.

    setInterval(function () {
    //获取当前时间
    var t_currenttime = new Date();
    //结束时间 - 当前时间 = 剩余时间
    var t_result = t_endtime.getTime() - t_currenttime.getTime();

    //剩余时间换算
    var t_time = Math.floor( t_result / 1000 );
    var t_result_day = Math.floor( t_time / t_day );
    var t_result_hour = Math.floor( t_time % t_day / t_hour);
    var t_result_min = Math.floor(t_time % t_day % t_hour/ t_min);
    var t_result_sec = Math.floor( t_time % t_day % t_hour % t_min);

    // 将时间小于10的,在值前面加入0;
    if ( t_result_day < 10) {
    t_result_day = "0" + t_result_day;
    }

    if ( t_result_hour < 10) {
    t_result_hour = "0" + t_result_hour;
    }

    if ( t_result_min < 10) {
    t_result_min = "0" + t_result_min;
    }

    if ( t_result_sec < 10) {
    t_result_sec = "0" + t_result_sec;
    }

    //显示页面
    ele_day.textContent = t_result_day;
    ele_hour.textContent = t_result_hour;
    ele_min.textContent = t_result_min;
    ele_sec.textContent = t_result_sec;

    },1000);

    很简单,一个倒计时功能就完成了.

    以上就是本文的全部内容,希望对大家的学习有所帮助。

    原文链接:https://www.f2er.com/js/50039.html

    猜你在找的JavaScript相关文章