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. vs2005新建项目中没有ASP.NET WEB应用程序

    今天正准备使用vs 2005,发现根本打不开老师发过来的源代码Portal_Article.csproj文件,上网查了一下,好多人都说是是因为没有给vs 2005打补丁.我的新建项目里根本没有ASP. ...

  2. 如何给EOS账户设置自定义权限

    https://bihu.com/article/1508858 EOS从上线以后,不断有传出token被盗的消息,安全无小事,我们一定要重视,今天从EOS帐户自己定义权限的角度来谈谈如何做好账户的安 ...

  3. 算法 -- 四种方法获取的最长“回文串”,并对时间复杂进行分析对比&PHP

    https://blog.csdn.net/hongyuancao/article/details/82962382 “回文串”是一个正读和反读都一样的字符串,比如“level”或者“noon”等等就 ...

  4. Spark快速获得CrossValidator的最佳模型参数

    Spark提供了便利的Pipeline模型,可以轻松的创建自己的学习模型. 但是大部分模型都是需要提供参数的,如果不提供就是默认参数,那么怎么选择参数就是一个比较常见的问题.Spark提供在org.a ...

  5. JS发送短信验证码

    <div> <input type="tel" id="mobile" name="mobile" placeholder ...

  6. windows系统上利用putty通过SSH连接亚马逊AWS服务器

    1. 找到在购买亚马逊的AWS服务器时保存的密钥文件(假设为abc.pem). 2.打开PuTTYgen,如下图,点击图中1处的“load”,找到abc.pem文件所在的位置,并选择abc.pem,确 ...

  7. GCC 用户态&内核态 Makefile

    转了一圈,今天再次回到C 网上一篇博文,个人感觉良心作品,故而拿来重新实现一遍,原作者原文有问题,我这里把他打通了 一.GCC Makefile //hello.c #include <stdi ...

  8. 获取 Google USB 驱动程序

    获取 Google USB 驱动程序       另请参阅 安装 USB 驱动程序 使用硬件设备 使用任何 Google Nexus 设备进行 ADB 调试时,只有 Windows 需要 Google ...

  9. cocos2dx - Lua 语言

    快捷注释: - -[[ print(10) - ->10  - - 不起作用(因为这是注释) - -]] 当重新启用这段代码时,只需在一次行行首添加一个连接字符即可: - - -[[ print ...

  10. Ajax(django)

    Ajax AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaSc ...