1.显示当前时间

<body onload="showtime()">

<div>当前时间：

<span id="clock"></span >

</div>

<script type="application/javascript">

function showtime()//创建函数

{

    var nowTime = new Date();//创建时间对象实例

    var hours = nowTime.getHours();//获取当前小时数

    var minutes = nowTime.getMinutes();//获取当前分钟数

    var seconds = nowTime.getSeconds();//获取当前秒数

    var timer = " "+((hours>12)?hours-12:hours);//将小时数质赋予变量timer

    timer +=((minutes<10)?"0:":":")+minutes;//将分钟数值赋予变量timer

    timer += ((seconds<10)?"0:":":")+seconds;//将秒数值赋予变量timer

    timer +=" "+((hours>12)?"pm":"am");//将字符am或pm赋予变量timer

    document.getElementById('clock').innerHTML =timer;

    setTimeout("showtime()",1000);

}

</script>

</body>

2.显示当前日期

<body onload="initArray()">

<div> <span id="todayIs"></span></div>

<script type="application/javascript">

function initArray()

{

    var today = new Date();

    var d = new Array(

    "星期日","星期一","星期二","星期三","星期四","星期五","星期六")

    //如果为2014年，getYear返回2014-1900=114，getFullYear返回2014

    var hh="<font color='#FBAE66' style='font-size:9pt;font-family:宋体'>今天是： "+

today.getFullYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日  "+d[today.getDay()]+"</font>";

document.getElementById('todayIs').innerHTML = hh;

}

</script>

</body>

3.显示页面停留时间

<body>

<div>当前页面停留时间：<span id="yy004" >0时0分0秒</span></div>

<script type="text/javascript">

var sec =0;

var minu=0;

var hou=0;

//每隔一秒刷新一次

window.setTimeout("uupdate()",1000);

function uupdate()

{

    sec++;

    if(sec==60)

    {

        sec =0;

        minu +=1;

    }

    if(minu==60)

    {

        minu=0;

        hou+=1;

    }

    var ss04 =hou+ "时"+minu+"分"+sec+"秒";

    document.getElementById('yy004').innerHTML=ss04;

    window.setTimeout("uupdate()",1000);

}

</script>

</body>

4.倒计时

<body>

<div id="yy005"></div>

<script type="application/javascript">

var nowDay = new Date();

var yyear = nowDay.getFullYear()+1;

var timeDate = new Date(yyear+"-01-01");

var date = timeDate.getTime()-nowDay.getTime();//获取剩余时间

//将剩余时间转换为剩余天数

var time = Math.floor(date/(1000*60*60*24));

var show005="";

if(time>=0)

{

    show005 = "现在离"+yyear+"年元旦还有：<font color='red'><b>"+time+"</b></font>天";

    document.getElementById('yy005').innerHTML=show005;

}

</script>

</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. SMW0上传EXCEL模板时报错无分配给对象***的MIME类型

    在使用SMW0上传照片.声音文件.EXCEL模板等文件时,遇到报错提示,如下图所示: 解决办法:需要先维护 .XLS 文件的MIME TYPE,SMW0 打开如下图所示 选择上图红色框中“WebRFC ...

  3. ArcMap中的名称冲突问题

    这是一个非常有趣的问题. 现在我一个点层叫"汶川73",有一个面层也叫"汶川73",使用空间连接工具来计算每个面中被落入有多少个点.但不管怎么算,结果都只能生成 ...

  4. Android接口回调机制

    开发中,接口回调是我们经常用到的. 接口回调的意思即,注册之后并不立马执行,而在某个时机触发执行. 举个例子: A有一个问题不会,他去问B,B暂时解决不出来,B说,等我(B)解决了再告诉你(A)此时A ...

  5. Linux0.11内核剖析--内核体系结构

    一个完整可用的操作系统主要由 4 部分组成:硬件.操作系统内核.操作系统服务和用户应用程序,如下图所示: 用户应用程序是指那些字处理程序. Internet 浏览器程序或用户自行编制的各种应用程序: ...

  6. Android源码分析之HandlerThread

    HandlerThread是一种特殊的Thread,也就是有Looper的thread,既然有looper的话,那我们就可以用此looper来 创建一个Handler,从而实现和它的交互,比如你可以通 ...

  7. 将tomcat源码导入eclipse

    前言: 写完了socket小应用的原始版本,中间还有好多预想的功能没有实现,在写的过程中也发现了很多问题.因为前面有粗略的看过tomcat实现原理解析,知道tomcat其实也是纯java写的web服务 ...

  8. 五种创建UIImage的类方法

    五种创建UIImage的类方法 UIImage有五个类方法,用来创建UIImage的.下面介绍一下每个类方法的作用和创建实例. 1.使用类方法imageNamed:创建 + (UIImage *)im ...

  9. <极客学院>视频教程学习笔记－iOS中CALayer的使用

    <1>CALayer简介 1.CALayer一般作为UIView的容器而使用. 2.CALayer是一个管理者图片载体(image-based content)的层结构 3.直接修改单独创 ...

  10. android基础开发之RecycleView(1)---基本使用方式

    RecycleView是google为了优化listview,gridview 提供的一个新的控件. 1.android 导入recycleview 在app的gradle里面加入: dependen ...