1.显示当前时间

  1. <body onload="showtime()">
  2. <div>当前时间：
  3. <span id="clock"></span >
  4. </div>
  5. <script type="application/javascript">
  6. function showtime()//创建函数
  7. {
  8.     var nowTime = new Date();//创建时间对象实例
  9.     var hours = nowTime.getHours();//获取当前小时数
  10.     var minutes = nowTime.getMinutes();//获取当前分钟数
  11.     var seconds = nowTime.getSeconds();//获取当前秒数
  12.     var timer = " "+((hours>12)?hours-12:hours);//将小时数质赋予变量timer
  13.     timer +=((minutes<10)?"0:":":")+minutes;//将分钟数值赋予变量timer
  14.     timer += ((seconds<10)?"0:":":")+seconds;//将秒数值赋予变量timer
  15.     timer +=" "+((hours>12)?"pm":"am");//将字符am或pm赋予变量timer
  16.     document.getElementById('clock').innerHTML =timer;
  17.     setTimeout("showtime()",1000);
  18. }
  19. </script>
  20. </body>

2.显示当前日期

  1. <body onload="initArray()">
  2. <div> <span id="todayIs"></span></div>
  3. <script type="application/javascript">
  4. function initArray()
  5. {
  6.     var today = new Date();
  7.     var d = new Array(
  8.     "星期日","星期一","星期二","星期三","星期四","星期五","星期六")
  9.     //如果为2014年，getYear返回2014-1900=114，getFullYear返回2014
  10.     var hh="<font color='#FBAE66' style='font-size:9pt;font-family:宋体'>今天是： "+
  11. today.getFullYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日  "+d[today.getDay()]+"</font>";
  12. document.getElementById('todayIs').innerHTML = hh;
  13. }
  14. </script>
  15. </body>

3.显示页面停留时间

  1. <body>
  2. <div>当前页面停留时间：<span id="yy004" >0时0分0秒</span></div>
  3. <script type="text/javascript">
  4. var sec =0;
  5. var minu=0;
  6. var hou=0;
  7. //每隔一秒刷新一次
  8. window.setTimeout("uupdate()",1000);
  9.  
  10. function uupdate()
  11. {
  12.     sec++;
  13.     if(sec==60)
  14.     {
  15.         sec =0;
  16.         minu +=1;
  17.     }
  18.     if(minu==60)
  19.     {
  20.         minu=0;
  21.         hou+=1;
  22.     }
  23.     var ss04 =hou+ "时"+minu+"分"+sec+"秒";
  24.     document.getElementById('yy004').innerHTML=ss04;
  25.     window.setTimeout("uupdate()",1000);
  26. }
  27. </script>
  28. </body>

4.倒计时

  1. <body>
  2. <div id="yy005"></div>
  3. <script type="application/javascript">
  4. var nowDay = new Date();
  5. var yyear = nowDay.getFullYear()+1;
  6. var timeDate = new Date(yyear+"-01-01");
  7. var date = timeDate.getTime()-nowDay.getTime();//获取剩余时间
  8. //将剩余时间转换为剩余天数
  9. var time = Math.floor(date/(1000*60*60*24));
  10. var show005="";
  11. if(time>=0)
  12. {
  13.     show005 = "现在离"+yyear+"年元旦还有：<font color='red'><b>"+time+"</b></font>天";
  14.     document.getElementById('yy005').innerHTML=show005;
  15.  
  16. }
  17. </script>
  18. </body>

来源：《HTML、CSS、Javascript网页制作从入门到精通》15.1章节

【温故而知新-Javascript】时间效果（显示当前时间、显示当前日期、显示页面停留时间、倒计时）的更多相关文章

  1. 前端开发自学之JavaScript——显示当前时间

    <html> <head> <title>JavaScript</title> <script language="javascript ...

  2. JavaScript 时间特效 显示当前时间

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. javascript 以“年-月-日 时：分：秒”格式显示当前时间

    运行代码 /** * Created by shgbit on 2015/1/9. *js代码 */ function showNow(){ var t=new Date();    var mont ...

  4. 时间操作（JavaScript版）—年月日三级联动（默认显示系统时间）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/35263317         这个功能 ...

  5. JavaScript实时显示当前时间的例子

    用javascript代码在当前页面中实时显示当前时间.代码如下: <html> <head> <title>JavaScript 实时显示当前时间-www.jbx ...

  6. JavaScript显示当前时间的操作

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...

  7. JavaScript实时显示当前时间

    1.HTML部分 <div id="div1">显示当前时间!</div> 2.css部分 #div1 { width: 700px; height: 50 ...

  8. html代码中显示系统时间

    可以显示系统的静态时间和动态时间 1,静态时间 <script type="text/javascript"> var myDate = new Date(); doc ...

  9. js显示当前时间

    闲着没事在闪存里看到有人需要js显示当前时间,就一时兴起写了个. 输出格式:“2013年12月18日 星期三 上午9:05:00 ”. <script type="text/javas ...

随机推荐

  1. （旧）子数涵数·VB——变量

    最近,VB吧频繁出现如下图所示的帖子(现在C吧.VB吧等都已经被二级考生玩坏了) 这主要用到的是变量的概念 首先,我们来看一下变量的数据类型 当然,就这题而言,数据类型不是重点,主要考察的是变量的作用 ...

  2. web技术人员-推荐书籍

    学习是技术人员成长的基础,本次分享20本技术方面的书籍,这些书不是每一本都是经典,但是每一本都有其特点.以下20本大部分本人都看过,因此推荐给大家.(本次推荐的20本只是一个参考,比如像Head Fi ...

  3. 关于SQL2008 “不允许保存更改。您所做的更改要求删除并重新创建以下表。您对无法重新创建的标进行了更改或者启用了‘阻止保存要求重新创建表的更改’” 解决方案

    不允许保存更改.您所做的更改要求删除并重新创建以下表.您对无法重新创建的标进行了更改或者启用了“阻止保存要求重新创建表的更改” 解决方法:  打开SQL SERVER 2008 工具-->选项- ...

  4. Visual Studio图片注释image-comments扩展

            有一个开源的Visual Studio小工具image-comments,它用于在源代码注释中插入图片,您可以到这儿下载.目前支持Visual Studio 2010/2012 Sta ...

  5. [TypeScript] TypeScript对象转JSON字符串范例

    [TypeScript] TypeScript对象转JSON字符串范例 Playground http://tinyurl.com/njbrnrv Samples class DataTable { ...

  6. 自定义XML动态配置程序

    概述 1 在做程序开发时,我们往往要用到如下两个基本模块 1> 设置程序的基础参数,如分页的参数.邮件参数等: 2> 在基于表驱动开发时,即把一些判断的逻辑放在表数据中: 2 在这两个基本 ...

  7. HTML5&CSS3经典动态表单-2

    上一个demo效果没出来!实际如下 代码没问题.不知道为啥,展示的demo里光标获取焦点的时候不会有如下效果

  8. JavaScript基础16——js的BOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. ES6新特性（函数默认参数，箭头函数）

    ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...

  10. 【使用 DOM】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...