需求说明：制作显示年、月、日、星期几并且显示上午（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. 求连续最大子序列积 - leetcode. 152 Maximum Product Subarray

    题目链接:Maximum Product Subarray solutions同步在github 题目很简单,给一个数组,求一个连续的子数组,使得数组元素之积最大.这是求连续最大子序列和的加强版,我们 ...

  2. 【活动】写#听云#原创博文 赢取iPhone 6超级大奖

    移动应用的使用量和重要性与日俱增,用户体验的要求也越来越高.与桌面程序相比,移动应用耗电小,速度慢,但手机用户却希望享受到与桌面程序同样的加载速度.那么如何发现移动应用的性能黑洞,优化移动应用性能,这 ...

  3. 项目规范性检测工具Lint

    项目规范性检测工具lint.bat 一.Lint基本概念介绍 Android Lint是SDK Tools 16 (ADT 16)之后才引入的工具,通过它对Android工程源代码进行扫描和检查,可发 ...

  4. Android闹钟开发与展示Demo

    前言: 看过了不少安卓闹钟开发的例子,都是点到为止,都不完整,这次整一个看看. 一.闹钟的设置不需要数据库,但是展示闹钟列表的时候需要,所以需要数据库: public class MySQLiteOp ...

  5. java用字符写字符

    import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.GraphicsEnvir ...

  6. python学习笔记整理——dictView [未整理]

    Dictionary view objects简介 The objects returned by dict.viewkeys(), dict.viewvalues() and dict.viewit ...

  7. SharePoint 2013 安装图解

    转自: http://www.cnblogs.com/jianyus/archive/2013/02/01/2889653.html 介绍:文章就是SharePoint2013安装过程的图解,包括步骤 ...

  8. springMVC之servlet-config.xml配置

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  9. spring 集成shiro 之 自定义过滤器

    在web.xml中加入 <!-- 过期时间配置 --> <session-config><session-timeout>3</session-timeout ...

  10. iOS开发小技巧--适当的清空模型中的某个数据,达到自己的需求,记得最后将数据还原(百思项目评论页面处理最热评论)

    一.项目需求,显示所有贴的时候,需要显示最热评论,但是点击进入相应帖子后,最热评论的label不要显示,如图: 解决方案 -- 该暂时保存的暂时保存,该清空的清空                   ...