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. keystone v3 相关介绍

    1) 涉及到如下几个概念:User.Tenant.Role.Token.http://www.ibm.com/developerworks/cn/cloud/library/1506_yuwz_key ...

  2. 文件上传（js, C#）

    ajaxFileUpload http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html

  3. IPC---信号量

    一.什么是信号量 信号量的使用主要是用来保护共享资源,使得资源在一个时刻只有一个进程(线程) 所拥有. 信号量的值为正的时候,说明它空闲.所测试的线程可以锁定而使用它.若为0,说明 它被占用,测试的线 ...

  4. Calendar类测试

    public static void main(String[] args) throws ParseException { // 字符串转换日期格式 // DateFormat fmtDateTim ...

  5. Java for LeetCode 231 Power of Two

    public boolean isPowerOfTwo(int n) { if(n<1) return false; while(n!=1){ if(n%2!=0) return false; ...

  6. Java for LintCode 颠倒整数

    将一个整数中的数字进行颠倒,当颠倒后的整数溢出时,返回 0 (标记为 32 位整数). 解题思路: JAVA实现如下: public int reverseInteger(int n) { Boole ...

  7. K3中添加的一条新数据，其在数据库中的位置

    最近研究将K3系统与生产管理系统结合起来,减少工作量,但如何确定其各自后台数据库的构成,其对应数据各自位于那张表内,总结了一下: 1.从百度搜索,查看表结构,然后找到目标表    另:K3数据库中单独 ...

  8. a byte of python (摘01)

    a byte of python 第一章 介绍 Python 特色 简单.易学.免费.开源 高层语言.可移植性.解释性 面向对象.可扩展性.可嵌入性 丰富的库 第二章 安装Python http:// ...

  9. Effective C++ -----条款18：让接口容易被正确使用，不易被误用

    好的接口很容易被正确使用,不容易被误用.你应该在你IDE所有接口中努力达成这些性质. “促进正确使用”的办法包括接口的一致性,以及与内置类型的行为兼容. “阻止误用"的办法包括建立新类型.限 ...

  10. nyoj925_国王的烦恼_并查集

    国王的烦恼 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 C国由n个小岛组成,为了方便小岛之间联络,C国在小岛间建立了m座大桥,每座大桥连接两座小岛.两个小岛间可能 ...