js之网页倒计时效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript">
        window.onload=function(){
            //倒计时函数
            function djs(){
                var fur_time=new Date(2017,5,30,10,30,0); //设置时间2017年5月30日
        //创建当前时间
        var now_time=new Date();

        //计算两个日期之间的时间差
        var diff=fur_time.getTime()-now_time.getTime();
        //alert(diff);
        var tian=parseInt(diff/(24*60*60*1000));//计算剩余多少天
        //获得计算完天数后还剩余的毫秒数
        diff=diff%(24*60*60*1000);
        //计算小时数
        var xiaoshi=parseInt(diff/(60*60*1000));
        //计算完小时后剩余的毫秒数
        diff=diff%(60*60*1000);
        //获得分钟数
        var fenzhong=parseInt(diff/(60*1000));
        //计算完分钟数后 的毫秒数
        diff=diff%(60*1000);

        //计算秒
        var miao=parseInt(diff/1000);
        //document.write(‘剩余时间还有‘+tian+‘天‘+xiaoshi+‘小时‘+fenzhong+‘分钟‘+miao+‘秒‘);
        var ss=document.getElementById(‘time‘).getElementsByTagName(‘span‘);
        ss[0].innerHTML=tian;
        ss[1].innerHTML=xiaoshi;
        ss[2].innerHTML=fenzhong;
        ss[3].innerHTML=miao;

            }
        djs();

        //用来倒计时的定时器
                setInterval(djs,1000);
        }
    </script>
    <body>
        <h2 id="time">剩余时间还有<span>0</span>天<span>0</span>小时<span>0</span>分<span>0</span>秒</h2>
    </body>
</html>
时间: 2024-08-30 03:59:49

js之网页倒计时效果的相关文章

js实现验证码倒计时效果

<input type="button" id="btn" value="获取验证码" onclick="getrand(this);"/> 一.已上是点击获取验证码的点击区. 二.以下是js代码 var countdown = 60; function getrand(obj) { if(countdown == 60){ $.post("/Home/Index/randNum", funct

js实现60s倒计时效果

适用于获取验证码等其他场景,下面代码直接粘贴句可以使用 // 60s获取验证码的js与html var timer = null; var count = 60; $('.box>button').click(function() { var codeText = $('.code').text(); if (codeText == '获取验证码') { timer = setInterval(function(){ count--; $('.code').text(count+'后获取验证码'

js实现60s倒计时效果用于获取短信验证码使用

有时候我们需要通过点击按钮向用户发送短信,需要一个计时效果. <button id="msg" type="button" style="width:120px; height:30px" >获取短信验证</button> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <

网页上的倒计时效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jquery数字倒计时代码</title&

用js在网页上完成倒计时3秒后自动跳转到另一个页面

<body> <div id="time"></div> <a href="#" onclick="stop()">停止</a> <script type="text/javascript"> var i=3; function changeTime(){ document.getElementById("time").innerHTM

网页3D效果库Three.js初窥

网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 Three.js官网的文档,部分文字和代码为我个人添加. 第一部分:three.js介绍 创建场景 这部分的目标是为Three.js做一个简单的介绍,我们会以创建一个场景,一个旋转的立方里开始,文章的结尾会有一个可运行的完整示例为你解惑. 开始之前 在你使用Three.js之前,你需要在你的电脑上建

基于SVG.js实现网页初始化线条描绘效果

前端实现看到一个网页的效果很cool(参考https://tympanus.net/Development/SVGDrawingAnimation/index2.html),决定自己去实现以下这个效果,并且封装成一个js插件供大家简单去实现该效果: 目前,已经实现了三种效果(描绘容器的边框,描绘线状统计图样式,描绘饼状统计图样式): 使用方法: 1.首先引入jquery和svg.js 2.然后引入svg.webInitAnimation.js 3.定义自己的dom元素 4.选择想要绘制的样式添加

Js写的一个倒计时效果实例

我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果:另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf

js/jq实现获取手机验证码倒计时效果

众所周知在前段的工作中注册信息或获取当前手机号信息等需求,我们基本上都要涉及到手机号验证码,在网络上搜索的案例杂乱无章,用的时候全是坑,真心不想用了,然后自己写了一个获取手机验证码的倒计时效果.有需求的伙伴们可以看看怎么实现的. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平