刚接触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. PHP预定义变量$_SERVER

    PHP预定义变量$_SERVER $_SERVER 是一个包含诸如头部(headers).路径(paths)和脚本位置(script locations)的数组.数组的实体由 web 服务器创建,不能 ...

  2. SQL SERVER大话存储结构(1)_数据页类型及页面指令分析

                如果转载,请注明博文来源: www.cnblogs.com/xinysu/   ,版权归 博客园 苏家小萝卜 所有.望各位支持!          SQLServer的数据页大 ...

  3. 分布式锁与实现(二)——基于ZooKeeper实现

    引言 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提 ...

  4. 一条sql语句引发mysql不停创建临时表的问题解决..coping to tmp table on desk

    (不懂临时表的先看 MySQL临时表 ) 首先,临时表只在当前连接可见,当关闭连接时,Mysql会自动删除表并释放所有空间.因此在不同的连接中可以创建同名的临时表,并且操作属于本连接的临时表.     ...

  5. Java IO最详解

    初学java,一直搞不懂java里面的io关系,在网上找了很多大多都是给个结构图草草描述也看的不是很懂.而且没有结合到java7 的最新技术,所以自己来整理一下,有错的话请指正,也希望大家提出宝贵意见 ...

  6. SSM框架搭建——我的第一个SSM项目

    转载自:http://blog.csdn.net/tmaskboy/article/details/51464791 作者使用MyEclipse 2014版本 本博客所编写程序源码为: http:// ...

  7. ionic创建项目遇到的各种问题

    前提:执行创建语句的前提是ionic环境已经装好,开始执行ionic start myApp blank. 提示已经有同名项目,是否覆盖.这里创建的是一个blank(空) 的ionic项目.还要两种是 ...

  8. JavaScript面向对象编程—this详解

      this详解 作者的话 在JavaScriptOPPt面向对象编程中,this这位老大哥,相信大家不会陌生.大家在遇到this时,很多朋友难免会有个疑问:"这个this是什么,它到底指向 ...

  9. vue2.0实践 —— Node + vue 实现移动官网

    简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...

  10. .Net Core应用搭建的分布式邮件系统设计

    本篇分享的是由NetCore搭建的分布式邮件系统,主要采用NetCore的Api和控制台应用程序,由于此系统属于公司的所以这里只能分享设计图和一些单纯不设计业务的类或方法: 为什么要在公司中首例采用N ...