主要内容：分析不同倒计时效果的计算思路及方法，掌握日期对象Date，获取时间的方法,计算时差的方法，实现不同的倒时计效果。

　　Javascript 日期对象：

　　Date()返回当前的日期和时间

　　getYear()返回年份，获得年最好用

　　getMonth()返回月份值（从0开始，+1）

　　getDate()查看Date对象，并返回日期（1-31）

　　getDay()返回星期几（0-6）

　　getHours()返回小时数（0-23）

　　getMinutes()返回分钟数（0-59）

　　getSeconds()返回秒数

　　getTime()返回毫秒数

　　getFullYear()方法来操作（完整格式，如2014）

例子：输出当前系统时间到页面指定位置：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>当前系统时间</title>
  6. <link rel="stylesheet" href="style.css"  />
  7. <script language="javascript" type="text/javascript">
  8.  
  9.   window.onload = function(){
  10.     showTime();
  11.   }
  12.   function checkTime(i){  //补位处理
  13.     if(i<10){
  14.         i="0"+i;
  15.     }else{
  16.         return i;
  17.     }
  18.   }
  19.   function showTime(){
  20.     var now=new Date();
  21.     var year=now.getFullYear();
  22.     var month=now.getMonth()+1;
  23.     var day=now.getDate();
  24.     var week=now.getDay();
  25.     var h=now.getHours();
  26.     var m=now.getMinutes();
  27.     var s=now.getSeconds();
  28.     m=checkTime(m)
  29.     s=checkTime(s)
  30.  
  31.     var weekday=new Array(7)
  32.     weekday[0]="星期日"
  33.     weekday[1]="星期一"
  34.     weekday[2]="星期二"
  35.     weekday[3]="星期三"
  36.     weekday[4]="星期四"
  37.     weekday[5]="星期五"
  38.     weekday[6]="星期六"
  39.  
  40.     document.getElementById("show").innerHTML=""+year+"年"+month+"月"+day+"日 "+  weekday[week] +h+":"+m+":"+s;
  41.     t=setTimeout('showTime()',500)
  42.   }
  43. </script>
  44. </head>
  45. <body>
  46. <div class="content1">
  47.   <div id="show">显示时间的位置</div>
  48. </div>
  49. </body>
  50. </html>

例子：实现使用时间差来转换倒计时效果

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>研究生考试时间</title>
  6. <link rel="stylesheet" href="style.css"  />
  7. </head>
  8. <script language="javascript" type="text/javascript">
  9.   window.onload = function(){
  10. 　　var timedate= new Date(2016,4,15,9,0,0);     //自定义结束时间
  11. 　　var now =new Date();    //获取当前时间
  12. 　　var date = timedate.getTime() - now.getTime();    //得出的为毫秒
  13. 　　var time = Math.ceil(date/(1000*60*60*24))  ;  //1000 * 60 * 60 * 24一天的秒数
  14.     if(time > 0 ){
  15.       document.getElementById('timeShow').innerHTML = time;
  16.     }
  17.     }
  18. </script>
  19. </head>
  20. <body>
  21.    <div class="content2">
  22.     <div class="txtshow">距离设置时间还有<span  id="timeShow"></span>天</div>
  23.    </div>
  24. </body>
  25. </html>

备注：new Date()里面设置的时间，如果你想设施3月份的，要写2，因为月份是从0开始的。

例子：实现团购、限时抢等效果

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>团购——限时抢</title>
  6. <link rel="stylesheet" href="style.css"  />
  7. </head>
  8.  
  9. <body>
  10. <div class="content3">
  11. <div class="time">还剩 <span id="LeftTime"></span></div>
  12. </div>
  13. <script>
  14. function FreshTime()
  15. {
  16.         var endtime=new Date("2015/5/15,12:20:12");//结束时间
  17.         var nowtime = new Date();//当前时间
  18.         var lefttime=nowtime.getTime()-endtime.getTime();
  19.         d=parseInt(lefttime/(24*60*60*1000));
  20.         h=parseInt(lefttime/(60*60*1000)%24);
  21.         m=parseInt(lefttime/(60*1000)%60);
  22.         s=parseInt(lefttime/1000%60);
  23.  
  24.         document.getElementById("LeftTime").innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
  25.         if(lefttime<=0){
  26.         document.getElementById("LeftTime").innerHTML="团购已结束";
  27.         clearInterval(sh);
  28.         }
  29. }
  30.    FreshTime()
  31.    var sh;
  32.    sh=setInterval(FreshTime,500);
  33. </script>
  34. </body>
  35. </html>

二、JavaScript语言--JS实践--倒计时效果的更多相关文章

  1. 二、JavaScript语言--JS实践--商城分类导航效果

    商城类导航菜单制作(以京东为例--竖向列表横向伸缩) 可以用两种方式来实现:用CSS实现和用JS实现 方法一:用CSS实现(要点:使用hover) <!DOCTYPE html PUBLIC & ...

  2. 二、JavaScript语言--JS实践--信息滚动效果制作

    运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...

  3. JS实现倒计时效果，并退出系统

    背景:由于单点登录后,一直在本系统操作,可是门户体统的会话失效时间有30分钟,所以30分钟后,需要重新登录系统才可以进行操作. 方法:想过在本系统中的每个操作都先跟门户系统进行交互,渠道refresh ...

  4. 二、JavaScript语言--JS基础--JavaScript入门篇

    1.如何插入JS 使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<scri ...

  5. JavaScript之JS实现动画效果

    在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...

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

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

  7. Javascript之实现页面倒计时效果

    本文将从需求实现的角度,逐步讲解如何在页面上实现倒计时效果,其中部分涉及到的知识会做拓展讲解,最后将所有代码封装,适用于不同情况下倒计时功能的实现. 效果图 一.分析需求 要实现倒计时效果,可拆解为以 ...

  8. js实现倒计时效果

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  9. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

随机推荐

  1. Java多线程基础知识（四）

    一. Condition 接口 1. Condition接口也提供了类似Object的监视器方法,与Lock配合可以实现等待/通知模式. 但是这两者在使用方式以及功能特性上还是有差别的. 2. 支持多 ...

  2. input多选计算

    CSS代码: body { counter-reset: icecream; } input:checked { counter-increment: icecream; } .total::afte ...

  3. native2ascii.exe

    native2ascii.exe 是 Java 的一个文件转码工具,是将特殊各异的内容 转为 用指定的编码标准文体形式统一的表现出来,它通常位于 JDK_home\bin 目录下,安装好 Java S ...

  4. ImageView显示网络图片

    package com.example.urlimage; import java.io.InputStream; import java.net.HttpURLConnection; import ...

  5. (原创)用Receiver和SystemService监听网络状态,注册Receiver的两种方式

    android中网络编程不可避免地要监听网络状态,wifi或者3G以及以太网,并根据当前状态做出相应决策. 在MyReceiver类中的onReceive方法中获得系统服务 ConnectivityM ...

  6. CCF 模拟C 找最大矩形+输入输出外挂

    http://115.28.138.223:81/view.page?opid=3 统计出连续的最长乘以当前高度,找最大即可 #include<iostream> #include< ...

  7. BZOJ 1485: [HNOI2009]有趣的数列

    Description 求长度为 \(2n\) 的序列.要求 1. \(a_1<a_3<a_5<...<a_{2n-1}\) . 2. \(a_2<a_4<a_6& ...

  8. idea修改默认快捷键

    点击file ,选择settings. 输入keymap: 因为多数人使用的都是eclipse,比较容易上手,习惯了eclipse的键位,如 此就能更换. 也可以在对应的操作上,设置自己熟悉的键位.

  9. Extjs String转Json

    var jsonStr= '{ "name": "zhangsan", "age": "18" }'; var json ...

  10. Bootstrap 3学习笔记 -栅格

    这是Bootstrap中非常基础一张表,但其实有这么容易掌握和理解吗? (1).对于col-md的div, 默认是垂直排列, 当视口(屏幕或浏览器的宽度)>992px,col-md-1的div块 ...