需求说明：制作显示年、月、日、星期几并且显示上午（AM）和下午（PM）的

12进制的时钟,具体效果如下所示：

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<meta  http-equiv="Content-Type" content="text/html charset=utf-8">

<html>

<head>

    <title>获取日期</title>

    <style type="text/css">

        p{

            font-weight: bold;

        }

    </style>

    <script type="text/javascript" >

       function fun(){

//            新建一个date对象

            var date =new Date();

            var year = date.getFullYear();

            var month = date.getMonth();

            var day = date.getDate();

            var hour = date.getHours();

            var minutes = date.getMinutes();

            var seconds = date.getSeconds();

            var week = date.getDay();

           if(week==1){

               week="一";

           }if(week==2){

               week="二";

           }

           if(week==3){

               week="三";

           }

           if(week==4){

               week="四";

           }

           if(week==5){

               week="五";

           }

           if(week==6){

               week="六";

           }

           if(week==7){

               week="日";

           }

            var am="";

            if(hour>=0 && hour<=12){

                am = "AM";

            }else{

                am = "PM"

            }

            document.getElementById("date").innerHTML=year+"年"+month+"月"+day+"日"+" "+hour+":"+minutes+":"+seconds+" "+am+" 星期"+week;

        }

        onload = function(){

            setInterval("fun()",100);

        }

    </script>

</head>

<body>

    <h1>你好，欢迎访问贵美商城！</h1>

    <p id="date"></p>

</body>

</html>

JavaScript制作时钟特效的更多相关文章

  1. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  2. 使用JavaScript制作页面特效2

    1.Date对象的常用方法 setFullYear() setMonth() setDate() setHours() setMinutes() setSeconds() 定时函数 setTimeou ...

  3. 利用Javascript制作网页特效（时间特效）

    在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...

  4. 原生javascript制作时钟

    用JavaScript来制作实时的时钟 效果图如下: 接下来,我会一步一步向大家介绍如何制作,并将里面的一些值得注意的事项提出来. 首先是把框架搭构起来, <div> <canvas ...

  5. 使用HTML5中的Canves标签制作时钟特效

    <!DOCTYPE html > <html> <head> </head> <body> <canvas id="cloc ...

  6. 用JavaScript制作页面特效

    1.Window对象 名称 history:有关客户访问过的URL的信息 location:有关当前URL的信息 screen:有关客户端的屏幕和显示性能的信息 常用方法 prompt():弹出输入框 ...

  7. HTML+JavaScript制作表白特效，表白不成功，小编现场吃雪

    今年的雪特别美,长沙自从08年后的最大的一场学了,今天小编给大家制作一个表白特效,希望大家喜欢,如果你是程序员希望对你有帮助,追到你喜欢的女孩,哈哈~追不到对象,小编现场吃学给你大家看 下图是爱心飘落 ...

  8. 利用Javascript制作网页特效（其他常见特效）

    设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)'; this ...

  9. 利用Javascript制作网页特效（窗口特效）

    全屏显示窗口 利用fullscreen=yes可以制作全屏显示窗口. ①:在body标签内输入以下代码: <div align="center"> <input ...

随机推荐

  1. <实训|第十二天>用LVM对linux分区进行动态扩容

    [root@localhost~]#序言在linux中,我们安装软件的途径一般有那些,你们知道吗?在linux中,如果你的磁盘空间不够用了,你知道如何来扩展磁盘吗?动态扩容不仅在工作中还是在其他方面都 ...

  2. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  3. Tensorflow学习笔记3：TensorBoard可视化学习

    TensorBoard简介 Tensorflow发布包中提供了TensorBoard,用于展示Tensorflow任务在计算过程中的Graph.定量指标图以及附加数据.大致的效果如下所示, Tenso ...

  4. closure！

    总结一下闭包. 闭包的定义:当一个内部函数被其外部函数之外的变量所引用时,就形成了一个闭包. 一个最简单的闭包: function A(){ var count=0; return function( ...

  5. get_post

    各种http的请求协议: http://ymiter.iteye.com/blog/1922464 HTTP请求报文和HTTP响应报文 http://www.cnblogs.com/biyeymyhj ...

  6. 初用protobuf-csharp-port

    下面这个用法是参照protobuf-csharp-port的官方wiki,参见: https://code.google.com/p/protobuf-csharp-port/wiki/Getting ...

  7. P值，“差异具有显著性”和“具有显著差异”

      P值是论文中最常用的一个统计学指标,可是其误用.解释错误的现象却很常见.因此,很有必要说明p值的意义.用法及常见错误.   P值指的是比较的两者的差别是由机遇所致的可能性大小.P值越小,越有理由认 ...

  8. 【Python】[函数] 调用与定义

    1.数据类型转换 int(),float(),str(),bool('1')2.定义函数使用 def关键字,依次写出 函数名.括号.括号中的参数.冒号,然后在缩进体中写函数内容 例子 求绝对值的函数 ...

  9. Tomcat5通过cardadm.xml启动项目

    配置tomcat5\conf\Catalina\localhost下的   cardadm.xml  ,然后在MyEclipse中,直接启动Tomcat5,不需要部署项目

  10. 在Word2013中多次应用格式刷

    顾名思义,格式刷是为了方便需要跨区域操作时候,能快速的应用格式到相应文本.那么怎么使用word进行格式刷的多次使用呢.我们先来看单次的,这个比较容易,只要在先需要的格式单击一次格式刷,再到需要的文本执 ...