js 倒计时小练习

涉及到一些date对象的操作,还有setInterval之类的基础知识。

题目还是IFE得js的课堂小练习。

要求:输入一个日期,然后计算出时间差,然后就这个时间差开始倒计时,时间到则倒计时停止。

html部分就简单的输入输出:

    <div>stage 2</div>
    <input type="date" style="width:400px;" id="text" />
    <input type="button" value="提交" id="submit" />
    <div style="border:1px" id="show"></div>

js部分如下:

可能代码不怎么规范,比如在循环里有var之类的,先实现了功能吧。

    $(document).ready(function(){
            $("#submit").click(function(){
                var date = $("#text").val();
                var dates = date.split("-");

                var date = new Date();
                date.setFullYear(dates[0],dates[1]-1,dates[2]);
                date = date.getTime();

                var song=setInterval(function(){
                            var nowDate = new Date();
                            nowDate = nowDate.getTime();
                            var a = Math.abs(nowDate-date);

                            if(a==0){
                                clearInterval(song);
                            }
                            var days=Math.floor(a/(24*3600*1000));
                            var b = a%(24*3600*1000);
                            var hours=Math.floor(b/(3600*1000));
                            var c = b%(3600*1000);
                            var minutes=Math.floor(c/(60*1000));
                            var d = c%(60*1000);
                            var seconds = Math.floor(d/(1000));
                            $("#show").html(days+"天"+hours+"时"+minutes+"分"+seconds+"秒");

                        },1000);

            })

        })
时间: 2024-11-06 09:44:19

js 倒计时小练习的相关文章

js一些小技巧 3

js一些小技巧 1. (1)同时按Ctrl+Enter提交本表单 在多行文本域增加onkeydown 事件 <form id="formNews_reply" class="bbs-send-form form" onsubmit="return news.add_newsReply(this);"> <fieldset class="inputs"> <label for="comme

js倒计时关闭当前页面代码

js倒计时关闭当前页面代码:很多网站在关闭网页之前会给出一个倒计时效果,这样可以让浏览者做到根据相应的情况进行操作,比较人性化,下面就通过实例代码介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

node.js实用小模块

1.浮点数操作 npm install float 2.MD5加密类 npm install MD5 3.xml解析类 1 npm install elementtree 4.转换字符串大小写 1 npm install convert_str 5.SoapClient 1 npm install soap 6.字符串操作类 1 npm install string 7.缓存 1 npm install memory-cache 8.jsontoxml;  objecttoxml 1 npm i

JS firebug小技巧

实际上前端的发展与进步也离不开浏览器的支持,而对于开发人员来讲,浏览器最好的支持,就是对于debug的良好支持,甚至在某些后续接手的项目中,前端的debug甚至可以解决好多问题--不说了,都是泪啊!还是说下firefox下的firebug吧.虽然ff内置一个调试的功能,但是,感觉不完善,对于开发人员来讲,根本不够用,于是ff下还是推荐firebug,老牌的前端debug工具,好用!而IE.Chrome都有很不错的工具支持,基本够用,但是用惯了ff的我,还是坚挺在firebug下. 1.使用"de

js倒计时函数和(js禁用和恢复a标签的操作)

<script type="text/javascript"> /*获取手机号*/ var start_time=60; function get_phone_nums(){ var get_cus_phone=$('.get_cus_phone').val();//得到消费者填写的的手机号 var reg = new RegExp("^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}|17[0-9]{9}$")

Js 常用小代码

//判断一个汉子等于两个字符 function getByteLen(val) { var len = 0; for (var i = 0; i < val.length; i++) { var a = val.charAt(i); if (a.match(/[^\x00-\xff]/ig) != null) { len += 2; } else { len += 1; } } return len; } Js 常用小代码

js 倒计时(可自定义时间)

原文 链接 http://www.cnblogs.com/liygheart/p/3605160.html <html> <head> <title>js 倒计时</title> </head> <body> <div> <h4>距离<input type="text" id="inputdate" value="2014-4-5"/> &

JS倒计时网页自动跳转代码

<title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/javascript"> function delayURL(url) { var delay = document.getElementById("time").innerHTML; if(delay > 0) { delay--; document.getElem

Js倒计时程序

Js倒计时程序 点击下载