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. Mac常用shell命令

    几个常用命令 pwd 命令名称:pwd 英文:print work directory 描述:查看当前工作目录的完整路径 ls 英文全称: list 描述:列出目录下的内容清单 常用参数: -l:列出 ...

  2. 关于final关键字和抽象类，接口

    final主要用于修饰类,方法以及属性 当用于修饰类时,则这个类不能被子类继承,换而言之该类没有子类 当用于修饰方法时,该方法也是不能被复写的 当用于修饰属性时,同理属性值不能被更改 抽象类,当存在抽 ...

  3. iOS开发之功能模块--Apns推送中的的json格式介绍

    在开发向苹果Apns推送消息服务功能,我们需要根据Apns接受的数据格式进行推送.下面接受我在进行apns推送时候总结的一点apns服务接受的Json数据格式 示例 1: 以下负载包含哦一个简单的 a ...

  4. HashSet 浅析示例

    * 1.继承自抽象类 AbstractSet,实现接口 Set.Cloneable.Serializable: * 2.元素无顺序: * 3.元素不可重复: * 4.采用哈希算法插入数据,插入速度快: ...

  5. C语言链表实现约瑟夫环问题

    需求表达:略 分析: 实现: #include<stdio.h> #include<stdlib.h> typedef struct node { int payload ; ...

  6. Start Instance 操作详解 - 每天5分钟玩转 OpenStack（31）

    本节通过日志文件详细分析 instance start 操作. 下面是 start instance 的流程图 向 nova-api 发送请求 nova-api 发送消息 nova-compute 执 ...

  7. 《The Elder Scrolls V: Skyrim》百般冷门却强力职业

    <The Elder Scrolls V: Skyrim>百般冷门却强力职业 1.有如成龙平常的杂耍型战斗窃贼 每次看帖都察觉大伙一贯在强调窃贼不需要防御,窃贼不需要血,窃贼就是一击致命, ...

  8. 第3章 Linux常用命令（2）_权限管理命令

    2. 权限管理命令 2.1 改变文件或目录权限:chmod (1)chmod命令 命令名称 chmod(change the permission mode of a file) 命令所在路径 /bi ...

  9. Flash Builder 4.7 注册机完美激活方法

    Flash Builder 4.7 破解注册方法目前较为通用的三种方法: 第一种:三步修改配置文件方法,这种有开发者反应这种方法在升级和创建纯 AS 项目时会存在问题,但我懒的去试这种方法的主要原因是 ...

  10. Winform布局方式

    一.默认布局 ★可以加panel,也可以不加: ★通过鼠标拖动控件的方式,根据自己的想法布局.拖动控件的过程中,会有对齐的线,方便操作: ★也可选中要布局的控件,在工具栏中有对齐工具可供选择,也有调整 ...