1.时间操作函数如下:

new Date();   //获取系统时间

getFullYear(); //年

getMonth()+1; //月,初始值为0

getDate(); //日

getDay(); //星期,星期日返回的值为0

getHours(); //时

getMinutes(); //分

getSeconds(); //秒

完整示例如下：

<!DOCTYPE html>

<html>

<head>

    <title>操作系统时间</title>

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

    <script type="text/javascript">

        window.onload = function(){

            setInterval(getClock,1000);

            getClock();//页面打开自动执行，防止刷新1s后才显示

            function getClock(){

                var oBody = document.body;

                var str = "";

                var myDate = new Date(); //获取系统时间

                var iYear = myDate.getFullYear(); //年

                var iMonth = myDate.getMonth()+1; //月,初始值为0

                var iDate = myDate.getDate(); //日

                var iWeek = myDate.getDay(); //星期,星期日返回的值为0

                var iHour = myDate.getHours(); //时

                var iMin = myDate.getMinutes(); //分

                var iSec = myDate.getSeconds(); //秒

                if(iWeek === 0) iWeek = "星期日";

                if(iWeek === 1) iWeek = "星期一";

                if(iWeek === 2) iWeek = "星期二";

                if(iWeek === 3) iWeek = "星期三";

                if(iWeek === 4) iWeek = "星期四";

                if(iWeek === 5) iWeek = "星期五";

                if(iWeek === 6) iWeek = "星期六";

                str = iYear+"年"+iMonth+"月"+iDate+"日"+ iWeek+ addZero(iHour)+":"+addZero(iMin)+":"+addZero(iSec);

                oBody.innerHTML = str;

            }

            function addZero(n){

                //如果当前返回的值小于10，则给它添加一个0

                return n<10 ? "0"+n : ""+n;

            }

        }

    </script>

</head>

<body>

</body>

</html>
2.倒计时原理:

倒计时在网页中也是一种常见的效果，它的原理就是将两个时间进行比较，然后再把算出来的值进行天，时，分，秒的转化，具体的使用案例如下代码所示：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>倒计时</title>

    <script type="text/javascript">

        window.onload = function(){

            cutdown();

            function cutdown(){

                var str="";

                var timer=null;

                var iNow = new Date();    //当前日期

                var iNew = new Date(2018,4,1,0,0,0); //未来的一个时间,数字形式,月份需要当前月份-1

                //var iNew = new Date('August 9,2016 0:0:0'); 字符串形式

                var t = Math.floor((iNew - iNow)/1000); //毫秒转化成秒

                var day = addZero(Math.floor(t/86400)); //获取天

                var hours = addZero(Math.floor(t%86400/3600)); //获取小时

                var min = addZero(Math.floor(t%86400%3600/60)); //获取分钟

                var sec = addZero(Math.floor(t%60)); //获取秒钟

                if(t>=0){

                    str = "距离2018年国庆节还有："+day+"天" + hours+"小时"+ min+"分"+ sec+"秒";

                    document.body.innerHTML = str;

                }else{

                    clearInterval(timer);

                }

            }

            function addZero(n){

                //如果当前返回的值小于10，则给它添加一个0

                return n<10 ? "0"+n : ""+n;

            }

            timer = setInterval(cutdown,1000);

        }

    </script>

</head>

<body>

</body>

</html>

js学习笔记9----时间操作的更多相关文章

  1. js学习笔记2---HTML属性操作

    1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...

  2. js学习笔记21----表格操作

    1.获取表格元素: tHead : 表格头 tBody : 表格主体内容 tFoot : 表格尾 rows  : 表格行 cells  : 表格列 如获取表格第一行第一列的数据: <script ...

  3. js学习笔记11----表单操作

    1.复选框选中 var aInput = document.getElementsByTagname('input'); aInput[0].checked=true;

  4. 一点感悟：《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

  5. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  6. Node.js学习笔记（2）：基本模块

    Node.js学习笔记(2):基本模块 模块 引入模块 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在No ...

  7. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  8. java学习笔记07--日期操作类

    java学习笔记07--日期操作类   一.Date类 在java.util包中定义了Date类,Date类本身使用非常简单,直接输出其实例化对象即可. public class T { public ...

  9. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

随机推荐

  1. iOS 疑难杂症 — — 复制 Storyborad 莫名崩溃

    声明  欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 复制无处不在,用 Story ...

  2. 【iOS】在Swift中使用JSONModel

    前言 首先所有的Model还是使用oc来写——看到这一句是不是想关网页了- - #,在swift里面直接写一直报错所以就将就用oc来写了,这里主要是分享一下搭配Alamofire使用的经验. 声明 欢 ...

  3. The operation couldn’t be completed. (LaunchServicesError error 0.)

    问题描述: 当运行Xcode时,编译代码成功,但是登陆模拟器失败,显示错误:The Operation couldn't be completed.(LaunchServicesError error ...

  4. Linux LVM学习总结——删除物理卷

    本篇介绍LVM管理中的命令vgreduce, pvremove.其实前面几篇中以及有所涉及. vgreduce:通过删除LVM卷组中的物理卷来减少卷组容量.注意:不能删除LVM卷组中剩余的最后一个物理 ...

  5. asp.net signalR 专题—— 第三篇 如何从外部线程访问 PersistentConnection

    在前面的两篇文章中,我们讲到的都是如何将消息从server推向client,又或者是client再推向server,貌似这样的逻辑没什么异常,但是放在真实 的环境中,你会很快发现有一个新需求,如何根据 ...

  6. HTTP状态管理机制之Cookie

    一.cookie 起源 cookie 最早是网景公司的雇员 Lou Montulli 在1993年3月发明,后被 W3C 采纳,目前 cookie 已经成为标准,所有的主流浏览器如 IE.Chrome ...

  7. linux特殊权限SUID、SGID、SBIT

    对于linux中文件或目录的权限,应该都知道普通的rwx权限(关于linux中rwx权限的看我的这篇博文http://www.cnblogs.com/javaee6/p/3994750.html).我 ...

  8. JSP连接数据库，报Unable to compile class for JSP

    先看一下报错原因: HTTP Status 500 - Unable to compile class for JSP: type Exception report message Unable to ...

  9. [WPF系列-高级TemplateBinding vs RelativeSource TemplatedParent]

    What is the difference between these 2 bindings: <ControlTemplate TargetType="{x:Type Button ...

  10. 《Inside UE4》目录

    <Inside UE4>目录 InsideUE4 UE4无疑是非常优秀的世界上最顶尖的引擎之一,性能和效果都非常出众,编辑器工作流也非常的出色,更难得宝贵的是完全的开源让我们有机会去从中吸 ...