js实现简单秒表走动的时钟特效

本文实例介绍了javascript实现简单的秒表走动的时钟特效,分享给大家供大家参考,具体如下：

运行效果图如下：

实现代码：

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10)
 {i="0" + i}
 return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript设计简单的秒表计时器

    javascript设计简单的秒表计时器

    本文实例讲述了javascript设计简单的秒表计时器的实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> New Document </title> </head> <body> <form action="somepage.asp"> <input type="text" value="0&q

  • 使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）

    效果图展示,感觉不错可以参考实例代码. 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document

  • 原生js 秒表实现代码

    html代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <meta charset="gb2312"> <head> <style type="text/css"> #container { margin:0 auto; margin-top:10%; width:200px; } #t

  • js实现秒表计时器

    js实现秒表计时器

    本文实例为大家分享了js实现秒表计时器的具体代码,供大家参考,具体内容如下 秒表计时器的实现: 效果图如下: 附代码,已调试运行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=

  • javascript 秒表计时器实现代码

    javascript 秒表计时器 实例代码: <html lang="en"> <head> <meta charset="UTF-8"> <title>js计时器</title> </head> <body> <input type="text" value="00:00"> <input type="button

  • 原生js实现秒表计时器功能

    原生js实现秒表计时器功能

    本文实例为大家分享了带有开始.暂停.清除功能的js计时器,供大家参考,具体内容如下 效果图: 下面贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> <script> var hour,minute,second;//时 分 秒 hour=minute=secon

  • 魔方在线秒表javascript版

    魔方在线秒表javascript版

    效果如下图所以,我发现了,本人最短时间为0.06秒,看大家的键盘与反应了.测试代码: 魔方小站秒表 Stopwatch for Rubik's Cube China td,input,div,th{font:9pt verdana} p {line-height:60%} var Max=25; var bestAve; var then; var nowDec; var nowBest; var nowWorst; var runing=0; var timeint; var i=0; var

  • js实现简单秒表走动的时钟特效

    本文实例介绍了javascript实现简单的秒表走动的时钟特效,分享给大家供大家参考,具体如下: 运行效果图如下: 实现代码: <html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds()

  • js实现简单的秒表走动的时钟特效

    js实现简单的秒表走动的时钟特效

    本文实例介绍了javascript实现简单的秒表走动的时钟特效.分享给大家供大家参考.具体如下:   运行效果图如下: 实现代码: <html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds(

  • JS实现页面炫酷的时钟特效示例

    JS实现页面炫酷的时钟特效示例

    目录 一.前言 二.想法设计/实现过程 三.基本样式 四.时间函数控制器 五,时,分,秒占位 六.时间动态填充 一.前言 今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页面. 特点就是炫酷,特效好,个人以心情愉快的感觉. 对于时间的变化,我打算使用翻页的特效来完成,色系的话采用黑色以主题,给人一种神秘的感觉. 而且要获取到本地的时间的数据来实时更新它的变化. 二.想法设计/实现过程 秉持着尽可能的美观炫酷,与用户的交互性好的原则,我初步的想法是,采用黑色系来增加可观性,

  • js+css3实现简单时钟特效

    本文实例为大家分享了js+css3实现简单时钟的具体代码,供大家参考,具体内容如下 1.实现了时钟的特效,可以转动,时间准确,画面美观大气: 2.用到了css3的transform: rotate,transform-origin:,伪元素,border-radius,定位,z-index等等 效果如图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

  • js实现简单圆盘时钟

    js实现简单圆盘时钟

    本文实例为大家分享了js实现简单圆盘时钟的具体代码,供大家参考,具体内容如下 预览图: 代码: css: <style> .disc { position: relative; margin: 200px auto; width: 300px; height: 300px; border: 1px solid #000; border-radius: 50%; } .axis { position: absolute; top: 150px; left: 150px; transform: t

  • js实现非常简单的焦点图切换特效实例

    本文实例讲述了js实现非常简单的焦点图切换特效的方法.分享给大家供大家参考.具体分析如下: 这是一个非常非常简单的焦点图(更像滑动门),可供初学者借鉴参考 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

  • 纯js代码制作的网页时钟特效【附实例】

    纯js代码制作的网页时钟特效,需要的码农可以拿去看一下.给大家做个参考. <HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META content="MSHTML 6.00.6000.16414" name=GENERATOR></HEAD> <BODY> <DIV style

  • JS实现简单日历特效

    JS实现简单日历特效

    本文实例为大家分享了JS实现简单日历特效的具体代码,供大家参考,具体内容如下 知识点 1.引入我的工具包 2.运用JavaScript内置对象 Date 运行效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; pa

  • js实现简单的秒表

    js实现简单的秒表

    本文实例为大家分享了js实现简单的秒表的具体代码,供大家参考,具体内容如下 描述: 实现一个简单的秒表,点击启动按钮时开始计时,随后启动按钮变为暂停, 点击暂停暂停计时,点击复位回到最初始状态. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style

  • JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例

    JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例

    本文实例讲述了JS实现的定时器展示简单秒表.页面弹框及跳转操作.分享给大家供大家参考,具体如下: 定时器展示简单秒表demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

随机推荐