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. 11.3---旋转有序数组之后查找元素（CC150）

    思路,这道题用二分,唯一的不同就是,1,a[left]<a[mid].那么说明左右有序,如果key还在a[left],a[mid]之间,就在这里找,如果不在就在右边找.注意:这里<要改成& ...

  2. Extjs TabPanel 选项卡延迟加载

    Extjs TabPanel 选项卡延迟加载 说明: Ext中用到tabpanel选项卡控件, 选项卡页签默认是延迟加载的, 当用户手工切换到某页签下时该页签才会加载, 在页签没有加载前, 用户对该页 ...

  3. mkdir:批量创建文件夹

    问题:mkdir dir[0-9]创建文件夹时,并没有如预期创建dir0~dir9这几个文件夹,而是创建了dir[0-9]这一个文件夹. 网上看了些相关资料,发现以前对[0-9]的理解不够透彻: &q ...

  4. IntelliJ IDEA 常用快捷键列表及技巧大全

    IntelliJ Idea 常用快捷键列表 Alt+回车 导入包,自动修正Ctrl+N  查找类Ctrl+Shift+N 查找文件Ctrl+Alt+L  格式化代码Ctrl+Alt+O 优化导入的类和 ...

  5. http statusCode(状态码)

    转自:1) http://specs.openstack.org/openstack/keystone-specs/api/v3/identity-api-v3.html#unauthorized   ...

  6. Java for LintCode 链表插入排序

    用插入排序对链表排序 解题思路: 最省时间的方法是使用优先级队列,但是无法通过,那就直接插入排序好了. public ListNode insertionSortList(ListNode head) ...

  7. 跟着 8 张思维导图学习 Javascript

    学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将po出8张javascript相关的思维导图. 思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又 ...

  8. nyoj221_Tree_subsequent_traversal

    Tree 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 Little Valentine liked playing with binary trees very ...

  9. ASM:《X86汇编语言-从实模式到保护模式》第14章：保护模式下的特权保护和任务概述

    ★PART1:32位保护模式下任务的隔离和特权级保护  这一章是全书的重点之一,这一张必须要理解特权级(包括CPL,RPL和DPL的含义)是什么,调用门的使用,还有LDT和TSS的工作原理(15章着重 ...

  10. andriod一次退出所有的Activity

    自己实现了一个Activity管理,可以实现一次退出所有的Activity.在Activity启动的时候,将调用里面的put方法,将Activity对象加入进来.在要退出某个activity的时候,将 ...