刚接触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. MyEclipse(8.5以上的版本) 安装js的开发插件aptana

    最近在学习js,想在MyEclipse(MyEclipse 10) 上面安装一个js的开发的插件aptana. MyEclipse 8.5以后的版本的安装的方法: 1.下载aptana_update_ ...

  2. Scraping_regex

    上面链接爬虫只是能将我们所需的网页下载下来,但是,我们没办法得到我们想要的数据.因此,我们只有URL管理器和URL下载器是不足以组成一个完整的网络爬虫的.我们还需要URL解析器,对数据进行提取. 数据 ...

  3. iOS之RunLoop

    RunLoop是iOS线程相关的比较重要的一个概念,无论是主线程还是子线程,都对应一个RunLoop,如果没有RunLoop,线程会马上被系统回收. 本文主要CFRunLoop的源码解析,并简单阐述一 ...

  4. 设计一个神经网络记住Or运算(日志一)

    由于公式书写太过麻烦,所以上传设计的手稿过程,为如下:

  5. CSS3特效----制作3D旋转照片展示区

    任务一.制作多背景 提示:上层有一个径向渐变,渐变图像farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204, ...

  6. Java之路 ——初识Eclipse

    零.大纲 一.前言 二.获取Eclipse 三.运行Eclipse 四.创建及运行第一个Java Project 五.界面介绍 六.如何调试 七.获取插件 八.Eclipse 快捷键 九.总结 一.前 ...

  7. 精选this关键字的指向规律你记住了吗

      1.首先要明确:           谁最终调用函数,this指向谁           this指向的永远只可能是对象!!!!!          this指向谁永远不取决于this写在哪,而取 ...

  8. JS解决通过按钮切换图片的问题

    我是JS初学者,本想通过JS解决轮播图的特效,上网看了下:大部分都是JQ解决的,对于初学者的我来说理解上有点困难.于是我自己只做了一个不那么高大上的JS轮播图,下面我简单介绍下我的步骤:在HTML中创 ...

  9. 跟随上次的socket sever,追加Tcplistener、Httplistener的server

    一.Tcplistener搭建web server 1.同socket类似,Tcplistener其实是对socket的封装,方便编程,先初始化tcplistener并且开始监听 //初始化端点信息 ...

  10. javascript之深入剖析this

    this的重要性不言而喻,比如面试题经常考到,其次,如果彻底理解了this,那么对理解框架源码及编写高质量代码都有很大的帮助.本文就是要深入剖析this的几种情况,理解了原理,以后妈妈再也不用担心你的 ...