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. LinkedList 浅析示例

    package com.smbea.demo; import java.util.Iterator; import java.util.LinkedList; import java.util.Lis ...

  2. 整型信号量和PV操作（计算机操作系统）

    在整型信号量机制中,信号量被定义为一个整形变量.除初始化外,仅能通过两个标准的原子操作Wait(S)和Signal(S)来访问.其通常分别被称为P.V操作. 描述如下: P操作:S=S-1:如果S小于 ...

  3. 72个可交付成果(PMBOK2008)

    成果名称 包括内容 来自 用于 事业环境因素 组织文化.政府法规.行业标准.市场条件.工作授权系统.商业数据库.项目管理信息系统 外部现有的 启动.规划.执行过程的输入 组织过程资产 流程与程序(模板 ...

  4. IntelliJ IDEA 配置运行程序

    IntelliJ IDEA 对于Javaer开发来说还是很nice的,就是第一次用可能配置项有点生疏,这里就记录一下IntelliJ IDEA 配置运行程序. 1. 点击Edit Config... ...

  5. 机器学习之寻找KMeans的最优K

    K-Means聚类算法是最为经典的,同时也是使用最为广泛的一种基于划分的聚类算法,它属于基于距离的无监督聚类算法.KMeans算法简单实用,在机器学习算法中占有重要的地位.对于KMeans算法而言,如 ...

  6. 不好的MySQL过程编写习惯

    刚才为了测试一个东西,写了个存储过程: delimiter $$ drop procedure if exists sp_test$$ create procedure sp_test() begin ...

  7. Oracle 12c 使用scott等普通用户的方法

    目录: 一.前言 二.使用普通用户 三.自动启动PDB 一.前言 最近电脑上安装了oracle 12c数据库,想体验下新特性.安装完后,便像11g一样在dos窗口进行下面的操作: SQL Produc ...

  8. Json解析工具Jackson（使用注解）

    原文http://blog.csdn.net/nomousewch/article/details/8955796 接上一篇文章Json解析工具Jackson(简单应用),jackson在实际应用中给 ...

  9. 解决Android Graphical Layout 界面效果不显示

    解决Android Graphical Layout 界面效果不显示 qq463431476

  10. Visual Studio SetSite failed for package [JavaScriptWebExtensionsPackage] 错误解决方案一则

    安装 AspNet5.ENU.RC1.exe Microsoft ASP.NET and Web Tools 2015 (RC) – Visual Studio 2015 打开VS后发生了错误 < ...