需求说明：制作显示年、月、日、星期几并且显示上午（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. 读懂IL代码就这么简单(三)完结篇

    一 前言 写了两篇关于IL指令相关的文章,分别把值类型与引用类型在 堆与栈上的操作区别详细的写了一遍 这第三篇也是最后一篇,之所以到第三篇就结束了,是因为以我现在的层次,能理解到的都写完了,而且个人认 ...

  2. SQL基础之数据库快照

    1.认识快照 如名字一样,数据库快照就可以理解为数据库某一时刻的照片,它记录了此时数据库的数据信息.如果要认识快照的本质,那就要了解快照的工作原理.当我们执行t-sql创建快照后,此时就会创建一个或多 ...

  3. 我开源了一个ios应用,你们拿去随便玩

    今天开源一个ios应用,自己写的,你们拿去随便玩.地址是: https://github.com/huijimuhe/prankPro 光拿来玩不理清个来龙去脉玩的也不开心是吧,那我就给你们摆摆来龙去 ...

  4. [BZOJ1264][AHOI2006]Match(DP+树状数组)

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1264 分析: 考虑做一般的LCS的时候,更新结果的条件是a[i]==b[j]时候 于是 ...

  5. STM32 C语言，端口映射

    static XX 有记忆的定义 typedef XX 可以多次定义一个 #ifedf XXX XXX(程序段1) #else XXX(程序段2)

  6. C语言之Sleep函数

    Sleep函数: 功 能: 执行挂起一段时间 用 法: unsigned sleep(unsigned seconds); 注意: 在VC中使用带上头文件#include <windows.h& ...

  7. spring MVC学习笔记

    为开发团队选择一款优秀的MVC框架是件难事儿,在众多可行的方案中决择需要很高的经验和水平.你的一个决定会影响团队未来的几年.要考虑方面太多: 1.简单易用,以提高开发效率.使小部分的精力在框架上,大部 ...

  8. ElasticSearch入门系列（七）搜索

    一.在之前,我们已经学会了如何使用elasticsearch作为一个简单的NoSql风格的分布式文件存储器--我们可以将一个JSON文档扔给Elasticsearch.也可以根据ID检索他们.但Ela ...

  9. AngularJS指令的详解

    指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.指令是我们用来扩展浏览器能力的技术 ...

  10. VMWare虚拟机提供的桥接、nat和主机模式的区别

    虚拟机网络模式 无论是vmware,virtual box,virtual pc等虚拟机软件,一般来说,虚拟机有三种网络模式: 1.桥接 2.NAT 3.Host-Only 哪一种网络是适合自己的虚拟 ...