JavaScript实例教程(十一)显示一个动态的时钟

2016-02-19 14:39 6 1 收藏

下面图老师小编跟大家分享JavaScript实例教程(十一)显示一个动态的时钟,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

【 tulaoshi.com - Web开发 】

前面说的显示当前时间日期是静态的,我们这里来实现一个动态的时钟。

在head和/head之间插入下列代码:

script
//定义时钟显示的函数
function displayTime() {
var today = new Date();
// 定义日期对象

var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
// 从日期对象中中获得时间信息

minutes = fixTime(minutes);
seconds = fixTime(seconds);
// 引入fixTime()函数,使分和秒可以正常显示,对于小于10的数字则在该数字前加一个0

var the_time = hours + ":" + minutes + ":" + seconds;
//将时间字符串组合在一起并写出
window.document.the_form.the_text.value = the_time;
//把表格的值重新写一遍,相当于刷新时间

the_timeout= setTimeout('displayTime();',500);
//每半秒钟执行一次该函数,即500毫秒
}
function fixTime(the_time)
{if (the_time 10) { the_time = "0" + the_time; } return the_time; }
/script

把body改为body onload=displayTime()

再在body标签间输入

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

欢迎光临5D多媒体 现在是北京时间:
form name="the_form"
pfont face="宋体"input type="text" name="the_text" size="16" /form

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

运行,可以看到浏览器显示如下:

JavaScript实例教程(十一)显示一个动态的时钟

来源:http://www.tulaoshi.com/n/20160219/1607440.html

延伸阅读
标签: PS PS基础
最终效果 1、首先打好网格线,亮点透视。我推荐先找到一个方形的物体来参考,确定角度。记住你看到的面越小,那么他们的放射点就越近。将需要的角度画出来后再连接竖线。 2、接着将竖线对角连接,并交叉点连接到一起。如果连接的线为直线,那么你的透视就没有问题。 3、将其他先连接到一起,一个方形就完成了。 4、画出两个圆...
有诸多缺点,比如不是时间触发而是靠线程挂起 package com.zhou.clock; import java.awt.*; import java.awt.geom.*; import javax.swing.*; import java.lang.Math; import java.util.Date; public class Clock extends JFrame { ClockPane cp; public Clock (){ super("clock"); setDefaultCloseOperation(EXIT_ON_CLOSE...
标签: Web开发
使用JavaScript中的OLE Automation 什么是Automation OLE(对象连接和嵌入)Automation允许应用程序完成通讯、交换数据以及控制其它应用程序等等。它还允许一个客户应用程序通过使用暴露对象的界面来创建和控制一个对象。一个Automation对象是可以通过Automation界面暴露给其它应用程序或者编程工具的一个对象。 Automation提供了一个文档...
标签: Web开发
使用JavaScript中的OLE Automation 7. 怎样处理集对象 Automation对象与其它的Jscript对象有些有相同的结构。它暴露了多种方法和属性,我们可以对它们进行处理。如果你从来没有接触Visual Basic,你可能就不熟悉集对象了。集就是相关项的组。集用在Visual Basic主要是为了保持跟踪许多事情,比如从你的程序(表单集)中装载表单,或者表单(...
标签: Web开发
好吧,现在让我们来测试一下这个宏。请在HotTMetaL中打开一个文档并将视图切换到源程序视图。你可以在ProgGuide目录中选择其中一段。并且通过使用Tools(工具)-Customization(定制)关闭Enable Source Layout按钮。接着将其中一行用加入空格往右移,再从工具菜单中调用宏对话框。这时会展现出定义在HotMetaL.mcr文件的宏的列表。然后运行Refr...

经验教程

477

收藏

69
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部