在JavaScript中,有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新,通过代码来创造一个实实在在的时间表。

  代码例子:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="惊风" />
<meta name="Genarator" content="sublime"/>
<title>时间的实现</title>
<style type="text/css">
#timetxt{
width:100px;
height:40px;
background-color:#EABC46;
font-size:20px;
line-height:40px;
margin:auto auto;
text-align:center;
}
</style>
<script type="text/javascript">
function startTime(){ var today=new Date(); //定义时间
var h=today.getHours(); //小时
var m=today.getMinutes(); //分钟
var s=today.getSeconds(); //秒 //调用函数
h=checkTime(h); m=checkTime(m); s=checkTime(s); document.getElementById("timetxt").innerHTML=h+":"+m+":"+s; //时间显示的格式
t=setTimeout(function(){ startTime(); },500);//500,是延时显示的意思,即500毫秒更新一次 } //当分钟和秒是一位时候,需要在前面加0(才更符合要求)
function checkTime(i){ if(i<10){ i="0"+i; } return i; } </script>
</head>
<body onload="startTime()">
<div id="timetxt"></div>
</body>
</html>

JavaScript时钟效果的更多相关文章

  1. 原生javascript实现网页显示日期时钟效果

    刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...

  2. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  3. 转 CSS3+js实现多彩炫酷旋转圆环时钟效果

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

  4. JS实现时钟效果

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

  5. jQuery+css3实现极具创意的罗盘旋转时钟效果源码

    效果 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  6. 学习CSS之用CSS实现时钟效果

    一.机械时钟 1.最终效果 用 CSS 绘制的机械时钟效果如下: HTML 中代码结构为: <body>     <div class="clock">   ...

  7. Flash AS实现时钟效果(全脚本实现)

    最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...

  8. Javascript动画效果(三)

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  9. Javascript动画效果(一)

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

随机推荐

  1. Linux_CentOS常用命令和shell命令技巧

    Linux_CentOS常用命令 关机 init 重启 init 列出当前目录的下的文件 ls //列出当前目录下的文件 ll //列出当前目录下的文件信息 等同ls -l 命令 切换目录 cd 目录 ...

  2. 设计input搜索框提示文字点击消失的效果

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

  3. 【Linux】采用nginx反向代理让websocket 支持 wss

    背景:玩swoole 服务 使用Nginx反向代理解决wss问题. 即客户端通过wss协议连接 Nginx 然后 Nginx 通过ws协议和server通讯. 也就是说Nginx负责通讯加解密,Ngi ...

  4. matlab学习笔记2--matlab的帮助

    一起来学matlab-matlab学习笔记2--matlab的帮助 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合应用>张德丰等著 感谢张 ...

  5. ubuntu 18.04下载mysql8.0.13源码并编译安装(暂时没有成功)

    执行如下命令下载解压MySQL8的源码文件压缩包到本地文件: wget https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-boost-8.0.13.ta ...

  6. TS - 问题解决力 - 上篇

    本文是已读书籍的内容摘要,少部分有轻微改动,但不影响原文表达. <麦肯锡工作法 - 个人竞争力提升50%的7堂课> ISBN: 9787508644691 https://book.dou ...

  7. 【计算机视觉】基于局部二值相似性模式(LBSP)的运动目标检测算法

    基于局部二值相似性模式(LBSP)的运动目标检测算法 kezunhai@gmail.com http://blog.csdn.net/kezunhai 本文根据论文:Improving backgro ...

  8. 修正线性单元(Rectified linear unit,ReLU)

    修正线性单元(Rectified linear unit,ReLU) Rectified linear unit 在神经网络中,常用到的激活函数有sigmoid函数f(x)=11+exp(−x).双曲 ...

  9. 安卓app和苹果app共用一个二维码

    应项目要求,现在安卓app和苹果app共用一个二维码,对外提供下载: <html> <head> <meta http-equiv="Content-Type& ...

  10. [转帖]Apache Kylin 概述

    Apache Kylin 概述 https://www.cnblogs.com/xiaodf/p/11671095.html 1 Kylin是什么 今天,随着移动互联网.物联网.AI等技术的快速兴起, ...