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. ubuntu查看端口占用

    查看端口号 sudo netstat -ltnp | 结束进程 sudo kill pid

  2. Python操作excel，及图表展示

    学习:http://www.cnblogs.com/Lands-ljk/p/5444619.html

  3. Linux查看硬盘型号

    Linux查看硬盘型号 -- :: 分类: 服务器与存储 请先确定服务器是否有配 RAID. 如果有RAID,请通过对应的RAID管理(监控)工具查看,例如LSI的MegaCli: # /opt/Me ...

  4. 渲染物体到一张UITexture上

    把这个脚本挂到一个Camera上 using UnityEngine; using System.Collections; [RequireComponent(typeof(Camera))] pub ...

  5. ACM/ICPC 之 BFS-广搜+队列入门-抓牛(POJ3278)

    这一题是练习广度优先搜索很好的例题,在很多广搜教学中经常用到,放在这里供学习搜索算法的孩纸们看看= = 题目大意:一维数轴上,农夫在N点,牛在K点,假定牛不会移动,农夫要找到这头牛只能够进行以下三种移 ...

  6. IP子网划分

    CIDR值: 1.掩码255.0.0.0:/8(A类地址默认掩码) 2.掩码255.128.0.0:/9 3.掩码255.192.0.0:/10 4.掩码255.224.0.0:/11 5.掩码255 ...

  7. 前台js分页，自己手写逻辑2

    //设置分页 var pageSize = 10; //设置一次显示多少页 var pageLimit = 5; $(function(){ $.post("rest/rtdbfix/lis ...

  8. 【Excel 4.0 函数】REGISTER

    REGISTER.ID 返回指定的 DLL 或 代码资源注册过的函数 ID.如果 DLL 或 代码资源没有注册,这个函数将会注册它们,并返回 注册ID. REGISTER.ID 可以用于工作表(不同于 ...

  9. iOS 中CoreData的简单使用

    原文链接:http://www.jianshu.com/p/4411f507dd9f 介绍:本文介绍的CoreData不在AppDelegate中创建,在程序中新建工程使用,即创建本地数据库,缓存数据 ...

  10. endnote设置文献第二行悬挂缩进办法

    参考:http://blog.sina.com.cn/s/blog_62b13cf201014lfr.html  使用[endnote]插入文献后,如果文献稍长些,有第二行,第二行会顶格开始.并且这个 ...