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. Android 拍照后保证保证图片不失真，进行压缩

    今天在网上找了一下参考,得出把图片压缩至KB 其他不想多说.直接上代码 拍完照后调用下面代码 BitmapUtils.compressBitmap(photoPath, photoPath, 640) ...

  2. 关于UIView布局的总结

    总结一下布局UIView 1.Laying out Subviews(布局子视图) 系统提供了相关的三个api - (void) layoutSubviews 在IOS5.1和之前的版本,此方法的缺省 ...

  3. 基于nutz框架理解Ioc容器

    同样我们从问题入手去验证以及去理解Ioc容器都做了哪些事情: 1.nutz是有几种方式获取需要容器管理bean的信息? 第一种是使用json格式的文件进行配置,如: 第二种:使用注解@IocBean ...

  4. python操作CouchDB

    安装python couchDb库: https://pypi.python.org/pypi/CouchDB/0.10 连接服务器 >>> import couchdb >& ...

  5. SqlServer数据冗余的问题和解决

    1问题: 1>造成了存储空间的浪费. 2>更新异常.删除异常. 所以一般情况不允许在表中出现数据冗余. 2怎么解决? 把原来表中的数据拆分成多个表来存储. 当把表中的信息拆分成多个表来存储 ...

  6. C#中Split用法

    1.用字符串分隔:  using System.Text.RegularExpressions; string str="aaajsbbbjsccc"; string[] sArr ...

  7. Oracle分区表

    先说句题外话-   欢迎成都天府软件园的小伙伴来面基交流经验~ 一:什么是分区(Partition)? 分区是将一个表或索引物理地分解为多个更小.更可管理的部分. 分区对应用透明,即对访问数据库的应用 ...

  8. Oracle约束(Constraint)详解

    概述 约束是数据库用来确保数据满足业务规则的手段,不过在真正的企业开发中,除了主键约束这类具有强需求的约束,像外键约束,检查约束更多时候仅仅出现在数据库设计阶段,真实环境却很少应用,更多是放到程序逻辑 ...

  9. OpenStack 企业私有云的若干需求（1）：Nova 虚机支持 GPU

    本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...

  10. java1.8常用的函数式接口

    //常用函数式接口 final ; //num++; //第一个为传入参数的类型:第二个为返回数据的类型 Function<int[],String> function = (from) ...