刚接触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. 关于quotename的用法

    首先,sqlserver里的标识符有一定的规则,比如  你 create table abc 123(...) 那么中间含有空格,它不是符合规则的. 你会写做 create table [abc 12 ...

  2. HTML5 拖放(Drag 和 Drop)功能开发——浅谈dataTransfer对象

    [前言] 之前我已经为大家介绍过一篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些关于dataTransfer对象的知识和应用. dataTransfer对象 之前的一 ...

  3. Spring框架基础知识

    本人博客文章网址:https://www.peretang.com/basic-knowledge-of-spring-framework/ Spring框架简介 Spring , 一个开源的框架 , ...

  4. MarkDown语法 学习笔记 效果源码对照

    MarkDown基本语法学习笔记 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 下面将对Markdown的基本使用做一个介绍 目 ...

  5. JavaScript window与undefined作为参数的作用

    1.原函数 输出结果:1 如图: 2.加window的参数 输出结果:window对象 如图: 注意:此时的window不是全局变量,而是局部变量 3.关于形参必须传window么?当然是不需要的 输 ...

  6. VR的发展历程-VR全景智慧城市

    从1962年有第一台VR开始,到2014年Oculus被Facebook收购为止,VR经历了一个非常漫长的过程.从鲜为人知,到被广泛认识,逐渐走进我们生活.这就是VR形成的时代.在这个时代里,VR设备 ...

  7. Day2-列表、字符串、字典、集合

    一.列表 定义列表:通过下标访问列表中的内容,从0开始 >>> name = ["zhang","wang","li",& ...

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

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

  9. 二、 添加控制器Controller(ASP.NET MVC5 系列)

    MVC是Model-View-Controller的简写.MVC是一种开发良好架构,可测试,易维护应用程序的设计模式.据于MVC的应用程序应该包含: Models: 是呈现应用程序数据和使用验证逻辑给 ...

  10. Java编程之反射中的注解详解

    "注解"这个词,可谓是在Java编程中出镜率比较高,而且也是一个老生常谈的话题.我们之前在聊Spring相关的东西时,注解是无处不在,之前我们简单的聊过一些"注解&quo ...