超实用的JavaScript代码段 Item1 --倒计时效果

现今团购网、电商网、门户网等,常使用时间记录重要的时刻,如时间显示、倒计时差、限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果。

1、简单时间显示

讲解日期对象Date,并通过该对象获取时、分、秒等,让你自由提取所需时间内容。

<!DOCTYPE html>
<html>
<head>
    <title>获取时间</title>
    <script type="text/javascript">
    window.onload = function(){
        showTime();
    }

    function showTime(){
        var myDate = new Date();
        var year = myDate.getFullYear();//年
        var month = myDate.getMonth() + 1;//月要+1
        var date = myDate.getDate();//天是getDate(),不是getDay()
        var dateArr = ["日","一",‘二‘,‘三‘,‘四‘,‘五‘,‘六‘];
        var day = myDate.getDay();//getDay()是星期的第几天,0为日。
        var hours = myDate.getHours();
        var minutes = formatTime(myDate.getMinutes());
        var seconds = formatTime(myDate.getSeconds());

        var systemTime = document.getElementById("time");
        systemTime.innerHTML = " " + year + "年" + month +"月" + date + "日" + " 星期" + dateArr[day] + " " + hours + ":" +  minutes + ":" + seconds;
        setTimeout("showTime()",500);
    }

    //格式化时间:分秒。
    function formatTime (i){
        if(i < 10){
            i = "0" + i;
        }
        return i;
    }

    </script>
</head>
<body>
    <div id =‘time‘></div>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

显示结果:

2、倒计时时差

讲解gettime()等方法,及计算时间的方法,学会时间相差的天数。

<!DOCTYPE html>
<html>
<head>
    <title>获取时间</title>
    <script type="text/javascript">
        window.onload = function(){
            deadTime();
        }
        function deadTime(){
            var nowTime = new Date();
            var finalTime = new Date("2015-11-11");
            var lefttime = (finalTime.getTime() - nowTime.getTime())/(1000*24*60*60);
            var date = Math.ceil(lefttime);
            document.getElementById("time").innerHTML = date;
        }
    </script>
</head>
<body>
    <div >距离双十一还有:<span id =‘time‘></span>天</div>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

显示效果:

3、 限时抢购

如何运用日期对象及方法,计算相差的天、时、分、秒的方法。

<!DOCTYPE html>
<html>
<head>
<title>团购——限时抢</title>

</head>

<body>

<div class="time"> <span id="LeftTime"></span></div>
</div>
<script>
function FreshTime()
{
        var endtime=new Date("2015/11/11,12:20:12");//结束时间
        var nowtime = new Date();//当前时间
        var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);
        d=parseInt(lefttime/3600/24);
        h=parseInt((lefttime/3600)%24);
        m=parseInt((lefttime/60)%60);
        s=parseInt(lefttime%60);

        document.getElementById("LeftTime").innerHTML="距离活动结束还剩" + d+"天"+h+"小时"+m+"分"+s+"秒";
        if(lefttime<=0){
                document.getElementById("LeftTime").innerHTML="团购已结束";
                clearInterval(sh);
        }
}
        FreshTime();
        var sh;
        sh=setInterval(FreshTime,1000);
</script>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

知识点:

1.学会使用日期对象Date和方法。
2.学会不同时间内容的获取。
3.学会计算时差的方法。

本实例通过慕课网相关课程整理:慕课网—–倒计时效果。

转载:http://blog.csdn.net/i10630226/article/details/49530617

时间: 2024-11-05 12:35:19

超实用的JavaScript代码段 Item1 --倒计时效果的相关文章

《超实用的JavaScript代码段》可以参加京东买200-100的促销了

#京东满200-100单# 图书放血大卖了,<超实用的JavaScript代码段>http://item.jd.com/11535623.html 参加京东满200减100的大促,就在6.1这一天,仅此一天,错过再等一年!!!!! 仅此一天,赶紧下单! 作者在群里随时给大家解决问题!!!

前端福利!10个短小却超实用的JavaScript 代码段

JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高 性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaScript的身影.JavaScript正在逐渐进化为一门全能的开发语言.下面是我收集 的10段实用JavaScript代码,基于它们你还可以创造出更强大的JS插件或功能函数. 但用好JavaScript并不容易,你除了需要掌握它的语法并知道如何写出高质量的代码之外,还需要了解如何解决那些几乎在每个项

《超实用的JavaScript代码段》—— 读后总结

这本书全是代码,从头到尾跟着坐下来确实收获很多.比那些古板的教科书式的理解更多,不过书中并不是每个例子都做了,有的作者封装的太多,觉得看了收获不多,就没细看——比如模块渐变.有空好好学学这段的代码. 其他的代码都收录于github,参考:CodeJS/JS 书中内容 这本书讲述了很多工作中常用的代码段,有一些也是目前网站很流行的技术.比如图片放大镜,导航置顶,广告浮动等等. 也通过这些例子梳理了下javascript的相关内容,主要包括3个方面: 1 ECMAScript核心 2 DOM 3 B

超实用的JavaScript代码段 Item5 --图片滑动效果实现

先上图 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>sliding doors</title> <link rel="stylesheet" href="styles/reset.css" /> <l

超实用的JavaScript代码段 Item6 -- 对Json的增删改属性

使用JS对Json数据的处理,项目遇到需要对Json数据进行相关操作,比如增删改操作,本以为会比较难,网上搜索下,发现还是比较简单的,贴一段代码: <script type="text/javascript">         var json = {             "age":24,             "name":"cst"         };         //修改Json中的age值,因

超实用的JavaScript代码段 Item4 --发送短信验证码

发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件.设置定时器变量和计时变量 第二步.添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为“发送验证码”,否则显示为“X秒后重试” <!doctype html> <html lang="en"> <head> <met

超实用的JavaScript代码段 Item7 -- “&amp;&amp;”和“||”操作符总结

1.||(逻辑或), 从字面上来说,只有前后都是false的时候才返回false,否则返回true. alert(true||false); // true alert(false||true); // true alert(true||true); // true alert(false||false); // false 这个傻子都知道~~ 但是,从深层意义上来说的话,却有另一番天地,试下面代码 alert(0||1);//1 显然,我们知道,前面0意味着false,而后面1意味着true,

《超实用的HTML代码段》阅读笔记1——HTML5自动聚焦

在页面加载完成后自动将输入焦点定位到需要的元素,用户就可以直接在改元素中进行输入而不需要手动选择它. 通过autofocus的属性就可以指定这种自动聚焦的功能,示例代码如下: <form name="input" action="html_form_action.php" method="post"> <div class="login-item"> <label for="nick&q

JavaScript代码段整理笔记系列(二)

上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey; //检测Alt event.ctrlKey; //检测Ctrl 17.获取屏幕分辨率的宽.高: window.screen.height; //获取屏幕的高 window.screen.width; //获取屏幕的宽 18.脚本永不出错的方式: window.onerror=function(m