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()‘,1000)
    }

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

<body onload="startTime()">

    <div id="txt"></div>

</body>
</html> 
时间: 2024-10-22 13:07:59

javascript数字时钟的相关文章

如何利用iframe标签以及Javascript制作时钟?

如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面来讲: javascript中的Date引用类型 几种效果不佳的实例 <iframe>标签 最终效果不错的实例 如果大家想直接看最终不错的效果实例,可以直接点击这里. 第一部分:Date引用类型 1.日期对象可以直接使用new操作符和Date构造函数构造.代码如下: 1 var date=new

如何用iframe标签以及Javascript制作时钟?

如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面来讲: javascript中的Date引用类型 几种效果不佳的实例 <iframe>标签 最终不错的效果实例 如果大家想直接看最终不错的效果实例,可以直接点击这里. 第一部分:Date引用类型 1.日期对象可以直接使用new操作符和Date构造函数构造.代码如下: var date=new Da

前端作品一之——网页数字时钟制作

1.制作前准备 在素材网上挑选你喜欢的0~9的数字图片,下载下来,用PS将这些图片切成合适在网页上显示的的大小(我切成50px*60px). 2.布局 在HTML将这几张图片引用进去,并排显示,并在每两个中间加上“:”,将包含图片标签的DIV设置成居中. 3.功能实现 将初始的图片显示都设置成数字0,这时在静态页面上会显示“00:00:00”:因为之前已经给图片命名为0~9.png通过getHours().getMinutes().getSeconds()分别获取时分秒这六个数值(需要注意的是当

Css3+jQuery打造的一款带动画效果的数字时钟

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Css3+jQuery打造的一款带动画效果的数字时钟丨任E行F9行车记录仪|gopro官网|电影院座椅|</title> <style type="text/css&quo

JS框架_(Vue.js)带有星期日期的数字时钟

数字时钟效果: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue.js带有星期日期的数字时钟代码</title> <style> html, body { height: 100%; } body { background:#C7C7C7; } p { margin: 0; padding: 0; } #clock { fon

JS — 实现简单的数字时钟

js实现简单的数字时钟 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS — 实现简单的数字时钟效果</title> 6 <link rel="stylesheet" type="text/css" href=""> 7 </head>

js实现动态数字时钟

1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS — 实现简单的数字时钟效果</title> <link rel="stylesheet" type="text/css" href=""> </head> <body&g

[Java项目01][数字时钟]

我从2016年3月份开始学Java,看的是某宝得来的视频,目前Java SE还没学完. 前几天手痒在网上搜Java小项目,看到Youtube上的歪果仁们做的Java数字时钟,非常简单,适合我这样的新手,于是也做了一份. 效果大概是是这样的: 源代码传到了GitHub上: https://github.com/jpch89/Digital-Clock 另外还录了份视频,免得以后自己忘了怎么做,传到了Vimeo上: https://vimeo.com/159116313 参考资料如下: 1. Cre

Qt仿Android带特效的数字时钟源码分析(滑动,翻页,旋转效果)

这个数字时钟的源码可以在Qt Demo中找到,风格是仿Android的,不过该Demo中含有三种动画效果(鉴于本人未曾用过Android的系统,因此不知道Android的数字时钟是否也含有这三种效果),其分别为滑动.翻页和旋转. 由于本人的Qt Creator输入中文后显示的都是乱码,因而在此只能使用英文进行注释,后期如果有时间再进行中文的相关整理.可能有些地方理解并不是很正确.希望大家多多指正! 以下为源码: [cpp] view plaincopy #include <QtCore> #i