定时器 & 日期时间对象 & 正则

1 JavaScript 计时事件

　　通过使用 JavaScript，有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，这称之为计时事件。

　　两个关键方法是:

　　　　setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

　　　　setTimeout() - 在指定的毫秒数后执行指定代码。

　　注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法，所以可以不使用window前缀

1.1 setInterval()

　　间隔指定的毫秒数不停地执行指定的代码

　　语法：

　　　　window.setInterval("javascript function",milliseconds);

　　　　第二个参数是间隔的毫秒数，1000 毫秒等于一秒。

1.2 clearInterval() 方法

　　用于停止 setInterval() 方法执行的函数代码。

　　语法：

　　　　clearInterval(intervalVariable)

1.3 setTimeout() 方法

　　语法：

　　myVar= window.setTimeout("javascript function", milliseconds);

1.4 clearTimeout() 方法

　　用于停止执行setTimeout()方法的函数代码。

　　语法：

　　　　clearTimeout(timeoutVariable)

1.5 自己的理解：

语法中有一个匿名函数，匿名函数就是没有名字的函数，是在某个情况下直接调用的。

每一次间隔执行，会等这次的所有过程全部完成了（例如，alert弹出，如果不点确认，则没有执行完毕），才会再进行下一次的间隔

示例1：弹窗添加定时器

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>定时器</title>

</head>

<body>

	<button onclick="show1()">正常执行弹窗</button>

	<br><br>

	<button onclick="show2()">间隔执行弹窗</button>

	<br><br>刷新一下再点<br>

	<button onclick="show3()">延迟执行弹窗</button>

<script>

function show1(){

	alert('正常');

}

function show2(){

	setInterval(function(){

		alert('间隔');

	},1000);

}

function show3(){

	setTimeout(function(){

		alert('延迟');

	},1000);

}

</script>

</body>

</html>

示例2：改变宽度，到某一条件后停止

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>清除定时器</title>

<style>

	#box{height: 100px;background: #0168B7;margin-top: 10px;transition: 1s;}

</style>

</head>

<body>

	<button onclick="show()">点击宽度改变</button>

	<div style="width: 100px;" id="box"></div>

<script>

function show(){

	var box=document.getElementById('box');

	var w=box.style.width;

	var timer=null;

	w=parseInt(w.slice(0,-2));//字符串截取方法

	timer=setInterval(function(){

		w=w+20;

		console.log(w);

		box.style.width=w+'px';

		if(w==220){

			clearInterval(timer);

		}

	},1000);

}

</script>

</body>

</html>

2 JavaScript Date 对象

　　Date 对象用于处理日期与时间。

2.1 创建日期

　　创建 Date 对象：var t= new Date();

　　有四种方式初始化日期:

　　　　new Date() // 当前日期和时间
　　　　new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
　　　　new Date(dateString)
　　　　new Date(year, month, day, hours, minutes, seconds, milliseconds)

2.2 设置日期

例：将日期对象设置为 5 天后的日期：

var myDate=new
Date();
myDate.setDate(myDate.getDate()+5);

2.3 Date 对象属性

2.4 Date 对象方法

2.5自己的理解：

创建一个date对象后，他只是创建了在创建那一瞬间的年月日时分秒，也就是说只能保存一个时间节点。

new
Date(milliseconds)，作为一个时间戳，因为不重复，所以常用来做数据库中的主键

示例1：显示当前的日期和时间，并添加成两位数（添加判断如果大于10）

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>时间日期两位数</title>

</head>

<body>

<p>当前时间是：</p>

<p id="timebox"></p>

<script>

timeSet();

function timeSet(){

	var t=new Date(),

		y=t.getFullYear(),

		m=t.getMonth()+1 >=10 ? t.getMonth()+1 : '0'+(t.getMonth()+1),

		d=t.getDate() >=10 ? t.getDate() : '0'+t.getDate(),

		h=t.getHours() >=10 ? t.getHours() : '0'+t.getHours(),

		f=t.getMinutes() >=10 ? t.getMinutes() : '0'+t.getMinutes(),

		s=t.getSeconds() >=10 ? t.getSeconds() : '0'+t.getSeconds();	

	var box=document.getElementById('timebox');	

	var str=y+'-'+m+'-'+d+' '+h+':'+f+':'+s;

	box.innerHTML=str;

}

setInterval(function(){

	timeSet();

},1000);

</script>

</body>

</html>

效果截图：

3 JavaScript RegExp 对象

　　RegExp：是正则表达式（regular expression）的简写。

3.1语法

var patt=new RegExp(pattern,modifiers);

或者更简单的方式:

var patt=/pattern/modifiers;

pattern（模式）描述了表达式的模式

modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。比如，以下是等价的：

var re = new RegExp("\\w+");

var re = /\w+/;

3.2 修饰符

修饰符用于执行区分大小写和全局匹配:

3.3 方括号

方括号用于查找某个范围内的字符：

3.4 元字符

元字符（Metacharacter）是拥有特殊含义的字符：

3.5量词

3.6 RegExp 对象方法

3.7 支持正则表达式的 String 对象的方法

3.8 RegExp 对象属性

示例1：验证是不是手机号

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>手机号验证</title>

</head>

<body>

<p><input type="text" id="uText" placeholder="输入电话号"/></p>

<button onclick="validate()">验证</button>

<script>

function validate(){

	var uT=document.getElementById('uText').value;

	var flag=uT.match(/^1[3,5,7,8,9]\d{9}$/);

	if(!flag){

		alert('不是电话号');

		return;

	}else{

		alert('验证通过');

	}

}

</script>

</body>

</html>

定时器 & 日期时间对象 & 正则的更多相关文章

08JavaScript数学与日期时间对象
JavaScript数学与日期时间对象 5.1.3数学(Math)对象 <script> //欧拉常量,自然对数的底(约等于2.718); document.write(Math.E+&q ...
Java8 新特性(三) - 日期时间对象以及一些其他特性
日期时间对象关于日期时间的操作可以分为两种: 转换:与字符串的互相转换,与时间戳的互相转换计算:计算两个时间点之间的间隔.时间点与时间段的计算(计算下周N.下个月D日.去年M月D日等等) Java ...
Javascript 日期时间格式正则
因为Javascript的日期格式判断可能因浏览器的版本有所不同,所以用正则判断会比较好,这里备注一个正则用来判断日期时间的格式: ^(?=\d)(?:(?!(?:1582(?:\.|-|\/)10( ...
Java实现日期时间对象的使用
利用类对象计算日期在利用Java语言进行信息系统开发中,经常需要对日期进行计算和转换,比如,设置了某活动的开始日期和结束日期,系统需要判断当前是否是该活动时间,在Java开发的信息系统中,通常日期以 ...
JavaScript中的内置对象-8--4.date对象中-获取,设置日期时间的方法; 获取,设置年月日时分秒及星期的方法;
学习目标 1.掌握创建日期对象的方法 2.掌握date对象中获取日期时间的方法 3.掌握date对象中设置日期时间的方法如何创建一个日期对象语法:new Date(); 功能:创建一个日期时间对象 ...
【转】JAVA 8 日期/时间（Date Time）API指南
前言本来想写下Java 8的日期/时间API,发现已经有篇不错的文章了,那就直接转载吧~ PS:主要内容没变,做了部分修改. 原文链接: journaldev 翻译: ImportNew.com - ...
python日期时间处理
time模块 #-*- coding: utf-8 -*- """ #获取当前时间的时间戳(单位秒) time.time() #推迟指定秒数后再运行 time.sleep ...
JavaScript Date 时间对象方法
Date(日期/时间对象) Date 操作日期和时间的对象 Date.getDate( ) 返回一个月中的某一天 Date.getDay( ) 返回一周中的某一天 Date.getFullYear( ...
【转载】Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
本文转载自脚本之家,源网址为:https://www.jb51.net/article/147429.htm 一.Python中日期时间模块datetime介绍 (一).datetime模块中包含如下 ...

随机推荐

Django 模板自定义context_processors
Django版本 1.8.4 为什么要自定义context_processors 在做博客的过程中,在浏览排行,评论排行,标签,文章归档,友情链接等内容每一个显示页面都是要显示的.如果在每一个view ...
一般项目转为Maven项目所遇到的问题
最近搞CI,准备使用Maven,但以前的项目不是Maven项目,需要把项目转换为Maven项目.这遇到几个小问题,一是jar包的依赖,二是从本地仓库取出依赖jar包. 由于没有本地仓库,要手动添加ja ...
Zigbee协议栈--Z-Stack的使用
使用方法简介:一般情况下用户只需要额外添加三个文件就可以完成一个项目.一个是主文件,存放具体的任务事件处理函数:一个是这个主文件的头文件:另外一个是以Osal开头的操作系统接口文件,是专门存放任务处理 ...
fastreport整理
Q1:如何直接打印,不显示打印对话框? frxReport1.PrintOptions.ShowDialog := false; frxReport1.PrepareReport(true); frx ...
在Elasticsearch6.X中如何实现去重
1.前言 Elasticsearch有没有类似mysql的distinct的去重功能呢? 1)如何去重计数? 类似mysql: select distinct(count(1)) from my_ta ...
php中的PCRE 函数，正则表达式处理函数。
有时候在一些特定的业务场景中需要匹配,或者提取一些关键的信息,例如匹配网页中的一些链接, 提取一些数据时,可能会用到正则匹配. 下面介绍一下php中的一些常用的正则处理函数. 一.preg_repla ...
洛谷P2414 [NOI2011]阿狸的打字机（AC自动机）
传送门考虑一下,如果串B在串A中出现过,那么A的fail指针必定直接或间接指向B 那么我们可以把fail树建起来,那么就变成B代表的节点的子树里有多少节点属于A 然后这就是一个序列统计问题,直接用d ...
基于react+如何搭建一个完整的前端框架（1）
1.使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. ...
Tomcat乱码问题
问题:淇℃伅 [main] org.apache.catalina.startup.VersionLoggerListener.log Server容器启动乱码--tomcat 解决:修改.tomca ...
Mysql深入理解（1）
一.关系型数据主要: 1.架构,2.索引,3.锁,4.语法,5.理论范式二.设计一个关系型数据库有哪些模块: 存储管理,缓存机制,Sql解析,日志管理,权限划分,容灾机制,索引管理,锁管理管理 1. ...

定时器 & 日期时间对象 & 正则

定时器 & 日期时间对象 & 正则的更多相关文章

随机推荐

热门专题