刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的。先看实际效果

要实现这样的效果

某年某月某日星期几几时几分几秒

先看代码效果

<script type="text/javascript">
window.onload=function(){
showDate();
countdown();
}
function showDate(){
var myDate=new Date();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;//月份范围为0到11月,所以要加一
var date=myDate.getDate();
var day=myDate.getDay();
var hour=myDate.getHours();
var minute=myDate.getMinutes();
var second=myDate.getSeconds();
var weekday=new Array(7);

weekday[0]="星期一";
weekday[1]="星期二";
weekday[2]="星期三";
weekday[3]="星期四";
weekday[4]="星期五";
weekday[5]="星期六";
weekday[6]="星期日";

document.getElementById("showTime").innerHTML=year+'年'+month+'月'+date+'日'+weekday[day]+hour+'时'+minute+'分'+second+'秒';

t=setTimeout('showDate()',500);
}

注意系统提供的月对象的范围是0到11,而不是12,所以var month=myDate.getMonth+1;

同时必须设置setTimeout函数,作用是实现网页上秒数的动态刷新

原生javascript实现网页显示日期时钟效果的更多相关文章

  1. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  2. 原生JavaScript 全特效微博发布面板效果实现

    javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...

  3. 原生JavaScript+CSS3实现移动端滑块效果

    在做web页面时,无论PC端还是移动端,我们会遇到滑块这样的效果,可能我们往往会想着去网上找插件,其实这个效果非常的简单,插件代码的的代码往往过于臃肿,不如自己动手,自给自足.首先看一下效果图: 分析 ...

  4. 利用原生JS实现网页1920banner图滚动效果

    内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...

  5. JQuery和原生JavaScript实现网页定位导航特效

    慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...

  6. 原生JavaScript技巧大收集100个

    原生JavaScript技巧大收集 1.原生JavaScript实现字符串长度截取function cutstr(str, len) { var temp; var icount = 0; var p ...

  7. python学习笔记--Django入门一 网页显示时间

    我的笔记是学习http://djangobook.py3k.cn/ 课程时做的,这个上边的文章讲的确实是非常的详细,非常感谢你们提供的知识. 上一篇随笔中已经配置好了Django环境,现在继续跟随ht ...

  8. 原生 javascript 基础回顾

    (1)打开新窗口 语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL:可选参数,在窗口中要显示网页的网址或路径.如果省略这个参数,或者它的值是空 字符串 ...

  9. 圆盘时钟效果 原生JS

    圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...

随机推荐

  1. 使用 Composer 安装 Laravel 框架

    前言: 1. Composer 安装 Laravel 有两种方式: 第一种是通过 Composer 的 create-project 命令安装 Laravel 框架, 第二种是先通过 Composer ...

  2. 忘记了root密码,如何进入系统?

    Issue 问题 忘记了root密码不能进入系统 如何进入系统? 环境 红帽企业版Linux所有版本 解决方法 可以进入单用户模式或者援救模式来改变root密码,如何进入单用户模式取决引导加载程序. ...

  3. IOS的UITableView

    UITableView 概述 UITableView 一般用来展示表格数据.可以滚动(继承自UIScrollView).性能极佳 UITableView分两种样式: Plain,不分组的样式 Grou ...

  4. 解决xmapp中Apache端口号占用问题

    [原]解决 "安装xmapp后Apache不能正常启动" 问题 小伙伴们安装xmapp后发现Apache不能正常开启,下面给出了不同情况的解决办法,可以分为以下几种情况分析问题: ...

  5. zabbix监控docker

    [toc] 1.下载模版 然后把模版放到/usr/local/lib/zabbix/agent下 github地址内含监控模版 2.修改 zabbix-agentd 配置文件 vim /usr/loc ...

  6. redis-key相关命令

    本篇主要介绍和redis的key进行操作的相关命令. 命令 描述 复杂度 返回值 DEL key [key ...] 删除给定的一个或多个 key .不存在的 key 会被忽略.删除单个列表.集合.有 ...

  7. 使用Cmder的几个问题

    Cmder 全尺寸版本 [101022] 新版本的 Cmder Full 版本,安装包目录的 config 目录下,已经没有 aliases 文件,在 vendor 下的 init.bat 下也没有了 ...

  8. 为什么要使用addEventListener而不是on监听事件

    昨天回答了一个关于vue的问题 vue 除了input 其他可以用keyup事件嘛? 在vue中没有提供除表单之外其它的keyup绑定方法,可以使用原生的监控键盘的事件,于是给出了代码: mounte ...

  9. web 直播&即时聊天------阿里云、融云(二)

    上一篇简要主要介绍了融云制作聊天室的基本方法,这次基本属于对上一篇的补充以及进阶...^_^... (ps:吐槽一下,加了三个融云的线下qq群,全部没人解决问题,也不知道建此群的意义,若是民间的话就当 ...

  10. 关于php中id设置自增后不连续的问题

    alter table tablename drop column id;alter table tablename add id mediumint(8) not null primary key ...