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. Visual Studio使用Web Deploy远程发布网站及其配置

    https://blog.csdn.net/yzj_xiaoyue/article/details/60574378 废话不多说,直接进入正题(各个步骤请看图片的序号): IIS配置 1.打开服务器 ...

  2. FCN-全卷积网络

    全卷积网络 Fully Convolutional Networks CNN 与 FCN 通常CNN网络在卷积层之后会接上若干个全连接层, 将卷积层产生的特征图(feature map)映射成一个固定 ...

  3. NYOJ 一笔画

    # include<iostream> # include<string> # include<string.h> # include<queue> # ...

  4. SpringBoot java.lang.IllegalArgumentException: Request header is too large

    在application.properties##tomcat 请求设置server.max-http-header-size=1048576server.tomcat.max-connections ...

  5. tf运作方式之共享变量

    转自:https://docs.pythontab.com/tensorflow/how_tos/variable_scope/ 这个讲的不错,能够更理解tf.get_Variable()了.创建时有 ...

  6. fullPage最后一屏自适应

    fullpage最后一屏可以有多少内容展示多少内容 1.需要引用一个滚动条 插件:jquery.slimscroll.js 2.引用一个属性   'scrollOverflow': true, 备注: ...

  7. 后续使用dubbo的必要性的思考

    要做微服务,要做分布式,就得先解决网络调用即rpc的问题

  8. 第一次使用theos自己遇到的坑

    这里自己遇到的一些问题,总结一下: 第一个问题建立好theos工程后make出现 xcrun: error: SDK "iphoneos" cannot be located xc ...

  9. python repr和str

    都是将对象转换为字符串 repr """ repr(object) -> string Return the canonical string representa ...

  10. rsa 加密 pkcs#1格式秘钥的格式化

    C++调用openssl库生成的秘钥对,通过传输传出来的只有秘钥的内容,没有秘钥的格式.而我们在调用openssl库加密解密时,传入的秘钥是需要包含格式的.C++调用openssl库需要的格式为pkc ...