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. 并发编程---线程queue---进程池线程池---异部调用(回调机制)

    线程 队列:先进先出 堆栈:后进先出 优先级:数字越小优先级越大,越先输出 import queue q = queue.Queue(3) # 先进先出-->队列 q.put('first') ...

  2. Python-Log-note.md

    #LOG - https://www.cnblogs.com/yyds/p/6901864.html - logging - logging模块提供模块级别的函数记录日志 - 包括四大组件 ## 1. ...

  3. node—基础命令

    1.安装node,在任意文件夹下按shift键选中“在此处打开PowerShell窗口”或者直接在开始菜单输入cmd启动 2.常用命令: c: 如果我们想访问c盘,那么我们需要在命令行中输入c:就行了 ...

  4. poj3259: Wormholes(BF模板题)

    http://poj.org/problem?id=3259 Description While exploring his many farms, Farmer John has discovere ...

  5. PLSQL的SQL%NOTFOUND的使用场景

    SELECT * INTO v_ticketStorageRow FROM BDM_TICKET_STORAGE WHERE p_startTicketNo >= START_NO_ AND p ...

  6. 解决异地服务器接口访问跨域,node构建反向代理

    跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...

  7. iOS 新浪微博-5.1 首页微博列表_时间/配图

    在上一篇中,我们已经把首页微博显示出来了,但还有很多细节,需要我们去调整的.这一章中,我们将处理好时间,配图,工具框及转发微博等小细节的功能. 时间处理 第一步:定义一个时间的类别,用于判断是昨天.今 ...

  8. Cocos Creator 获取节点的方式

    1.通过find方式获取//获取节点 var node=cc.find("Canvas/logo"); //获取精灵组件 var sprite=node.getComponent( ...

  9. cocos2d-x JS 复选按钮checkBox的单选与多选

    var HZ_createRoom = jx.BaseView.extend({//红中麻将 ctor : function() { this._super(); this.addLayout(res ...

  10. Spring.之.报错:Caused by: java.lang.ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException

    Caused by: java.lang.ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWo ...