javascript数字时钟示例分享

代码很简单，直接上代码了，大家可以复制下面的代码保存成HTML文件运行看效果

代码如下:

<!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/xhtml">
<head></head>
<body>
<script language="javascript">
function Change(HourSurplus,MinuteSurplus,SecondSurplus)
{

SecondSurplus = SecondSurplus - 1;
 if (SecondSurplus<0) 
 { 
 SecondSurplus=60+SecondSurplus; 
 MinuteSurplus=MinuteSurplus-1; 
 } 
 if (MinuteSurplus<0) 
 {  
 MinuteSurplus=60+MinuteSurplus; 
 HourSurplus=HourSurplus-1; 
 }
 document.getElementById("asd").innerHTML=""+ HourSurplus +":"+ MinuteSurplus +":"+ SecondSurplus +"";
 setTimeout(function() {
 Change(HourSurplus,MinuteSurplus,SecondSurplus);
 },1000);
}

</script>
<span id="asd">11111</span>
<script language="javascript">
Change(1,59,59);
</script>
</body>
</html>

赞 (0)

相关推荐

  • js实现一个简单的数字时钟效果

    js实现一个简单的数字时钟效果

    效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>一个简单的数字时钟</title> <script type="text/javascript" charset="utf-8

  • JS 实现倒计时数字时钟效果【附实例代码】

    这篇文章主要介绍了JS实现的网页倒计时数字时钟效果,是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

  • javascript实现滚动效果的数字时钟实例

    javascript实现滚动效果的数字时钟实例

    网上关于javascript实现数字时钟效果的实例很多,但是本文给大家介绍的是滚动效果的数字时钟.小编觉得效果很炫,下面分享给大家. 先来看看很炫的效果 下面是代码实例 javascript代码部分: window.onload=function(){ function toDou(n){ return n<10?"0"+n:""+n; } var oImg=document.getElementsByTagName("img"); set

  • html5 canvas js(数字时钟)实例代码

    html5 canvas js(数字时钟)实例代码

    复制代码 代码如下: <!doctype html><html>    <head>        <title>canvas dClock</title>    </head>    <body>        <canvas id = "clock" width = "500px" height = "200px">            您的浏览

  • 基于JavaScript实现数码时钟效果

    本文实例为大家分享了js实现数码时钟效果展示的具体代码,供大家参考,具体内容如下 通过建立toDBl函数将小于10的时间前面补上"0"使得时钟正常运行. 通过for循环将数组中的每一项都赋值给img元素相对应的上面,str.charAt(i)通过i递增将str的每个数字输入到src中. 通过封装函数tick,并调用了一次,使得网页在刷新时不会出现图片变化. 通过getHours,getMinutes,getSeconds来获取当前时间的数值.并将其通过toDbl函数+' '(一个空的字

  • 使用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://www.w3.org/1999/xhtml"> &l

  • 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://www.w3.org/1999/xhtml&q

  • javascript数字时钟示例分享

    代码很简单,直接上代码了,大家可以复制下面的代码保存成HTML文件运行看效果 复制代码 代码如下: <!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/xhtml">

  • JavaScript原型链示例分享

    复制代码 代码如下: <mce:script type="text/javascript"><!--/*   每个对象实例都有个属性成员用于指向到它的instanceof 对象(暂称为父对象)的原型(prototype)   我们把这种层层指向父原型的关系称为[原型链 prototype chian]   原型也具有父原型,因为它往往也是一个对象实例,除非我们人为地去改变它   在JavaScript中,"一切都是对象,函数是第一型."   Fun

  • JavaScript数值数组排序示例分享

    但是,我们在使用中就会发现问题,这里的数组排序方法并不是按照我们想像中的数字大小来排序的,而是按照字符串测试结果改变原先的数据.这并不是我们想要的. 那么如何才可以得到我们想要的按照我们思维中的数字大小来排序呢.我们可以自己编写一个函数来实现. 复制代码 代码如下: var values = [0, 1, 5, 10, 15];// asc升序函数function compareAsc(value1, value2) {    if (value1 > value2) {        retu

  • JavaScript作用域链示例分享

    JavaScript只有函数作用域:每个函数都有个作用域链直达window对象. 变量的查找由内而外层层查找,找到即止. 同时不仅可以查找使用,甚至可以改变外部变量. 复制代码 代码如下: var color = "blue";function changeColor() {    var anotherColor = "red";    function swapColors() {        var tempColor = anotherColor;    

  • java控制台输出数字金字塔示例分享

    复制代码 代码如下: /*Java  *Author: NealFeng at oschina.net *License: GPLv2+ *Time: 2014/1/17 * *在控制台输出数字金字塔: *                   1 *               1   2   1 *           1   2   4   2   1 *       1   2   4   8   4   2   1 *   1   2   4   8  16   8   4   2  

  • android实现widget时钟示例分享

    一.在 AndroidManifest.xml文件中配置Widgets: 复制代码 代码如下: <manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.example.widget"    android:versionCode="1"    android:versionName="1.0" >   

  • javascript日期格式化示例分享

    复制代码 代码如下: /**   * 格式化日期   * @param {Object} ms 表示指定日期与 1970 年 1 月 1 日午夜间全球标准时间的毫秒数   * @return year-month-date hh:mm   */   Util.parseToDate = function(ms){            var date = (new Date(parseInt(ms)));          return formatDate(date,"yyyy-MM-dd

  • java实现的小时钟示例分享

    复制代码 代码如下: //package com.clock; import java.awt.BasicStroke;import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.Insets;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;i

  • C#实现漂亮的数字时钟效果

    C#实现漂亮的数字时钟效果

    本文实例讲述了用C#做了一个漂亮的数字时钟.分享给大家供大家参考. 程序运行后界面如下: 实现技术:主要是通过Graphics类的DrawImage方法来绘制数字时钟中所有的数字,这些数字是从网上找的一些图片文件.时钟使用DateTime中Now属性来获得不同的,时,分,秒,最后通过定时器来实现时钟的运行状态. 主要代码如下: 复制代码 代码如下: //将0~9数字图片保存在Image数组中  private Image[] image = new Bitmap[10];  public For

随机推荐