html部分

<div id="clock">
</div>

css部分

#clock{
width:600px ;
text-align: center;
margin:50px auto ;
}
span{
font-size: 32px;
}

js部分

<script type="text/javascript">
function getId(id){ //id传入的是字符串
return document.getElementById(id);
};
function myDate(){
var myDate=new Date();
var y=myDate.getFullYear();
var m=myDate.getMonth()+1;
var r=myDate.getDate();
var h=myDate.getHours();
var f=myDate.getMinutes();
var s=myDate.getSeconds();
var clockDiv=getId('clock');
clockDiv.innerHTML="<div><span>"+y+"年</span><span>"+m+"月</span><span>"+r+"日</span></div><div><span>"+h+"时</span><span>"+f+"分</span><span>"+s+"秒</span></div>";
}
window.onload=function(){
setInterval(myDate,1000)
myDate();
}
</script>

js 简易时钟的更多相关文章

  1. JS简易时钟

    HTML <div id="clock"> <span></span>:<span></span>:<span&g ...

  2. marked.js简易手册

    marked.js简易手册 本文介绍的是marked.js.秉持"来之即用"的原则,对它进行简要的翻译和归纳, 安装 在网上引用或者是引用本地文件即可.要么就用命令行: npm i ...

  3. js简易日历

    js简易日历中设计的知识点:选项卡切换   数组    innerHTML  连接符 与选项卡的区别:div的个数不同 连接符中需要注意的:(优先级) "abc"+12+3+&qu ...

  4. js 动态时钟

    js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. JS实现时钟特效

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

  6. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

  7. 通过Canvas + JS 实现简易时钟实战

    最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...

  8. canvas绘制简易时钟

    时钟绘制的非常简易,但该有的都有了. 效果图如下, <!DOCTYPE html> <html> <head lang="en"> <me ...

  9. JS 做时钟

    今天,给大家分享一个用JS做的时钟. <!DOCTYPE html><html> <head> <meta charset="utf-8" ...

随机推荐

  1. Linux命令实例功能笔记

    ls命令 ls对文件mtime时间进行排序 降序: ls -lt |  grep '^-'    升序:   ls -ltr  |  grep '^-' seq命令 求1000以内所有偶数的和 ech ...

  2. 转git的使用

    git的使用(包括创建远程仓库到上传代码到git的详细步骤以及git的一些常用命令) A创建远程仓库到上传代码到git 1)登陆或这注册git账号 https://github.com 2)创建远程仓 ...

  3. 输出调试技巧 PRINTF()

    #define PRINTF(...) \ do { \ printf( "%d:%s::",__LINE__, __FUNCTION__);\ printf(__VA_ARGS_ ...

  4. MyBatis基础入门《十九》动态SQL(set,trim)

    MyBatis基础入门<十九>动态SQL(set,trim) 描述: 1. 问题 : 更新用户表数据时,若某个参数为null时,会导致更新错误 2. 分析: 正确结果: 若某个参数为nul ...

  5. LeetCode71.简化路径

    给定一个文档 (Unix-style) 的完全路径,请进行路径简化. 例如,path = "/home/", => "/home"path = " ...

  6. EL的隐含对象(一)【页面上下文对象】

    页面上下文对象为pageContext,用于访问JSP内置对象(例如:request.response.out.session.exception.page等)和ServletContext.在获取到 ...

  7. notepad去掉空行

    选择替换,把查找模式设置为正则表达式,在查找框中自己输入 ^\s+  ,替换框留空,点“全部替换”,即可(先全选).注意:不要复制我的,自己输入,且用英文格式输入.

  8. 001- CreateProcess failed with error 216 (no message available)错误详解

    问题详解 runnerw.exe: CreateProcess failed with error 216 (no message available) 看描述,创建进程失败,应该是main这个入口文 ...

  9. java中的锁之AbstractQueuedSynchronizer源码分析(一)

    一.AbstractQueuedSynchronizer类介绍. 该抽象类有两个内部类,分别是静态不可继承的Node类和公有的ConditionObject类.AbstractQueuedSynchr ...

  10. [1]windows 内核情景分析---说明

    本文说明:这一系列文章(笔记)是在看雪里面下载word文档,现转帖出来,希望更多的人能看到并分享,感谢原作者的分享精神. 说明 本文结合<Windows内核情景分析>(毛德操著).< ...