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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

//实例：动态时钟

/*

    （1）时间日期信息，应该在一个<div>中来显示

    （2）定时器：每隔一秒再次访问系统时间，window对象的setTimeout()

    （3）时钟显示的时机(事件)：当网页加载完成后才显示，事件onload

    （4）如何将 时间日期信息 写入到指定的<div>中，DOM对象中的innerHTML属性

*/

//定义函数：构建要显示的时间日期字符串

function showTime()

{

    //创建Date对象

    var today = new Date();

    //分别取出年、月、日、时、分、秒

    var year = today.getFullYear();

    var month = today.getMonth()+1;

    var day = today.getDate();

    var hours = today.getHours();

    var minutes = today.getMinutes();

    var seconds = today.getSeconds();

    //如果是单个数，则前面补0

    month     = month<10     ? "0"+month : month;

    day     = day  <10     ? "0"+day : day;

    hours     = hours<10     ? "0"+hours : hours;

    minutes    = minutes<10 ? "0"+minutes : minutes;

    seconds = seconds<10 ? "0"+seconds : seconds;

    //构建要输出的字符串

    var str = year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;

    //获取id=result的对象

    var obj = document.getElementById("result");

    //将str的内容写入到id=result的<div>中去

    obj.innerHTML = str;

    //延时器

    window.setTimeout("showTime()",1000);

}

</script>

<style type="text/css">

#result{

    width:500px;

    border:1px solid #CCCCCC;

    background:#FFFFCC;

    margin:50px auto;

    font-size:24px;

    color:#FF0000;

    padding:20px;

}

</style>

</head>

<body onload="showTime()">

<div id="result"></div>

</body>

</html>

js 动态时钟的更多相关文章

  1. js+css3动态时钟-------Day66

    昨天,有一天招,宽带到底没装上.相当恼火,不过包了一天租新房,有很多想法下来,其中,率先实现了--动态时钟(它已上载的资源,一些粗略的全貌.汗...) 这里记录.这个看似简单的功能,以达到良好的,我在 ...

  2. js动态数字时钟

    js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...

  3. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  4. CSS3_过渡_2D 变换_瓶体旋转_动态时钟

    1. 过渡 transition 允许 CSS 的属性值在一定时间内平滑的过渡, 在鼠标点击,鼠标滑过或对属性改变中触发,并圆滑的改变 CSS 的属性值 简写属性: #box { width: 300 ...

  5. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  6. js动态加载以及确定加载完成的代码

    利用原生js动态加载js文件到页面,并在确定加载完成后调用相关function var otherJScipt = document.createElement("script") ...

  7. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  8. js动态替换数据的点击事件

    做项目时遇到的,具体是界面如下图:当点击X号时,出现删除.取消按钮,当点击删除时,这一行删除,当点击取消时又恢复到初始状态. 需要关注的问题是,js动态添加的删除.取消按钮的点击事件.当点击取消时恢复 ...

  9. linux动态时钟探索

    在早期的linux内核版本的时间概念都是由周期时钟提供的.虽然比较有效,但是,对于关注能耗电量的系统上,就不能满足长时间休眠的需求,因为周期系统要求必须在一定的频率下,周期性的处于活动状态.因此,li ...

随机推荐

  1. [ruby on rails] 深入(2) ruby基本语法

    1. 调试&注释&打印输出 1.1 调试 ruby属于解释型语言,即脚本,在linux上,脚本的执行无非三种: 1. 用解释器运行脚本 解释器 脚本文件 即:ruby  脚本文件 2. ...

  2. Expression表达式树

    表达式树表示树状数据结构的代码,树状结构中的每个节点都是一个表达式,例如一个方法调用或类似 x < y 的二元运算 1.利用 Lambda 表达式创建表达式树 Expression<Fun ...

  3. C#跨线程操作控件

    1.首先通过按键创建子线程: 创建子线程,子线程调用changeText方法. private void btnOK_Click(object sender, EventArgs e) { Threa ...

  4. selenium 右键下载图片，结合sikuli

    上一次写右键下载是结合robot,这次是使用selenium+sikuli 上一次日志:http://www.cnblogs.com/tobecrazy/p/3969390.html 有关sikuli ...

  5. ada 图形编辑器 - GNAT GPL

    The GNAT GPL and SPARK GPL Editions are made available to the free software developers by AdaCore. T ...

  6. Java for LintCode 验证二叉查找树

    给定一个二叉树,判断它是否是合法的二叉查找树(BST) 一棵BST定义为: 节点的左子树中的值要严格小于该节点的值.    节点的右子树中的值要严格大于该节点的值.    左右子树也必须是二叉查找树. ...

  7. 1.【转】spring MVC入门示例(hello world demo)

    1. Spring MVC介绍 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于 ...

  8. zookeeper集群搭建（windows环境下）

    本次zk测试部署版本为3.4.6版本,下载地址http://mirrors.cnnic.cn/apache/zookeeper/ 限于服务器个数有限本次测试了两种情况 1.单节点方式:部署在一台服务器 ...

  9. C++基础练习题（一）： 查找最短单词

    /*<说明> 编程实现将字符串中最短的单词输出,在主函数中输入字符串,编写一个函数完成最短单词的查找 </说明>*/ #include<time.h> #inclu ...

  10. python getopt.getopt 不能精确匹配的问题

    代码:opts,argv = getopt.getopt(sys.argv[1:],('u:'),['ad','join','passwd=','domain=','dip=','test','ip= ...