练习倒计时例子_v1.0-byKL

heartFollower 发布于2019-08-21 15:27 / 1672人阅读

摘要：练习倒计时例子倒计时就是时间一秒秒的倒数一般都是目标时间跟现在时间进行比较部分结果部分对象的使用对象基于年月日世界标准时间起的毫秒数返回的是毫秒数传入的参数表示日期的字符串值。

练习倒计时例子

倒计时就是时间一秒秒的倒数,一般都是目标时间跟现在时间进行比较

html部分




    结果:

js部分

Date对象的使用

Date 对象基于1970年1月1日（世界标准时间）起的毫秒数,返回的是毫秒数

传入的参数dateString表示日期的字符串值。该字符串应该能被 Date.parse() 方法识别的才能够解析为毫秒数

通过解析时间字符串获得他们的毫秒数,然后可以对毫秒数进行运算来获取相差值

有类似getFullYear()的方法提取时间值,参考

对于数字运算后的取整(Math对象的使用)

floor方法是取整,并且没有四舍五入的情况

setInterval的使用

 var inputTime = document.getElementById("inputTime");
    var submitBtn = document.getElementById("submit");

    submitBtn.addEventListener("click", function () {
        countDownFunc();
    }, false);

    //倒计时func
    var countDownFunc = function(){
        setInterval(function () {
            var dstTime = new Date((inputTime.value));
            var now = new Date();
            var time = (dstTime - now) / 1000;
            console.log(time);
            // 秒转化为小时，分钟，天
            var day = Math.floor(time / (24 * 60 * 60));
            var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60));
            var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60);
            var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60);


            var str = "距离还剩下:" + day + "天" + hour + "时" + minute + "分" + second + "秒";
            var _timmer = document.getElementById("view");
            _timmer.innerHTML = str;
        },1000)
    };

云服务器 GPU云服务器 html练习阿里大于 php短信例子练习练习代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88188.html

task0002（四）- 练习：数据处理、轮播及交互

摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。转载自我的个人博客欢迎大家批评指正包括5部分：小练习1-处理用户输入小练习2-日期对象的使用小练习3：轮播图小练习4：输入提示框小练习...

cnTomato 2019-08-22 10:59 评论0 收藏0
task0002（四）- 练习：数据处理、轮播及交互

摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。转载自我的个人博客欢迎大家批评指正包括5部分：小练习1-处理用户输入小练习2-日期对象的使用小练习3：轮播图小练习4：输入提示框小练习...

赵春朋 2019-08-01 15:00 评论0 收藏0
原生js练习题---第三课

摘要：我这里更进一步修复了这个，想法很简单我可以等你输完再把非数字全替换掉，只要把方法的正则改成全局匹配就。页面加载后累加，自加实现效果页面加载后累加，自加第三题的变种，换成触发变化而已。 0x1用typeof查看数据类型略过，不过typeof用来判断数据类型是不太靠谱的，尤其是涉及到引用类型的时候，除非是要检测一个变量是否有定义，否则最好采用Object.prototype.toStri...

tomlingtm 2019-08-19 17:56 评论0 收藏0
html5之canvas

摘要：是新加的标签，主要有和，的应用是动画和图像，的应用是游戏渲染。 HTML5 Canvas canvas是html5新加的标签，主要有2D和3D，2D的应用是动画和图像，3D的应用是游戏渲染。 1. 2D基础 1.1绘制线 canvas window.onload = function(){ ...

苏丹 2019-08-26 13:43 评论0 收藏0