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. abap function module中的异常处理

    1: 定义一个有异常抛出的function module.  (zfm_moudle6),  该函数中有符合exceptions中的异常,将会自动将exceptions中的异常抛出. FUNCTION ...

  2. 阿里云ECS利用密钥对ssh登录服务器

    https://blog.csdn.net/u012865381/article/details/78521087/ 1.在服务机上操作创建要远程登录的用户和密码 [root@izwz97s23bov ...

  3. Spring Boot下的lombok安装以及使用简介

    引言:lombok是一套代码模板解决方案,将极大提升开发的效率,这里介绍给大家使用. 1. Lombok lombok是一个可以通过简单的注解的形式来帮助我们简化消除一些必须有但显得很臃肿的 Java ...

  4. dialog问题记录

    这个怎么回事,怎么会负利润 http://mmbiz.qpic.cn/mmbiz_jpg/sd9PceC1NdAEVpR5pKerugkpEPEUIsBVoaz5ibTiaHtxoickmF2bXqF ...

  5. mac 安装geckodriver和chromedriver

    Last login: Fri Apr :: on ttys000 (base) localhost:~ ligaijiang$ env TERM_PROGRAM=Apple_Terminal SHE ...

  6. [LeetCode] 577. Employee Bonus_Easy tag: SQL

    Select all employee's name and bonus whose bonus is < 1000. Table:Employee +-------+--------+---- ...

  7. Eclipse配置Github -分享你的代码

    搭建了虚拟机供练手用,想要保存练习代码,于是想在VM Eclipse上配置Github,从此随练随保存. 步骤:1. eclipse ->help->install new softwar ...

  8. Photobucket不能用了怎么办?推荐10个在线图片储存服务!

    近日,图片共享服务网站Photobucket更新了政策,要求用户缴纳399美元的年费,才能使用第三方网站图片储存服务. 由于Photobucket出台这一政策,亚马逊及其他电商平台上相关的产品图片已被 ...

  9. [xdoj] 1310 DSKer的卡牌游戏

    http://acm.xidian.edu.cn/problem.php?id=1310 1. 这道题可以类比括号匹配,YY和yy是两组可以匹配的信号,当然要注意逻辑是否正确,一开始进行括号匹配算法的 ...

  10. echarts实现全国地图

    1.首先我没有按需引入echarts,我是全局引入的,所以说在node_modules中有 这个china,你只需要在你的页面引入即可 但是按需引入echarts 的 项目中node_modules中 ...