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. CoreGraphics-基本图形绘制-直线、三角形、矩形、椭圆形、弧形

    框架:CoreGraphics 步骤: 1."获取"图形上下文     let cxtRef = UIGraphicsGetCurrentContext()! 2.添加路径 3.渲 ...

  2. 浅谈Bluetooth蓝牙开发

    前言:项目用到蓝牙开发,具体蓝牙获取硬件传感器中的数据. 因为没有蓝牙开发的相关经验,决定先了解一些蓝牙开发的知识,再去看之前同事写的蓝牙相关代码. ------------------------- ...

  3. ios中@class和 #import区别

    很多刚开始学习iOS开发的同学可能在看别人的代码的时候会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,不禁纳闷起来,为什么不直接把#import放到h文件中呢?这是因 ...

  4. ListView和Adapter的配合使用以及Adapter的重写

    ListView和Adapter的使用   首先介绍一下ListView是Android开发过程中较为常见的组件之一,它将数据以列表的形式展现出来.一般而言,一个ListView由以下三个元素组成: ...

  5. SQL Server Replication 中关于视图的点滴

    在服务器A数据库TEST新建了一个本地发布(Local Publications)RPL_GES_MIS_TEST,在服务器B数据库RPL_TEST上创建了一个本地订阅(Local Subscript ...

  6. ansible 初探nginx安装

    我的配置: /etc/hosts: /etc/ansible/hosts: nglinx安装包: ansible自动化安装nginx: 1.安装ansible. 2.创建目录结构: mkdir -p ...

  7. Form 引用方法库

    进入注册表,win+R 输入:regedit,找到HKEY_LOCAL_MACHINE->SOFTWARE->ORACLE ,在右侧找到:FORMS60_PATH,双击,把方法库的路径以英 ...

  8. 服务器运行环境(LNMP)安装说明

    服务器运行环境(LNMP)安装说明 因为公司需要一套流程标准,所以写了如下步骤. 先下载文件environment.tar,将文件上传到服务器. 使用命令解压文件,tar xvf environmen ...

  9. 【java开发】数组基本学习

    一维数组 定义:具有相同数据类型的一组数据. 声明:int []a=new int[3];    释义:该数组的数据类型为int型,该数组长度为3,有3个元素 可采用如下方式为元素赋值:a[0]=1; ...

  10. Mysql 主从热备份

    工作原理 首先锁定并备份主服务器数据库,从服务器导入备份的数据库,实现两个数据库的初态一样.然后把主服务器上执行过的sql语句都记录到二进制日志 Binarylog 中,从服务器会来读取这个log, ...