JavaScript day11
知识点回顾
-
flex:1 flex:1 1 auto ; (flex-grow , flex-shrink , flex-basis)
-
数组转字符串 join()
-
字符串转数组 split()
-
获取年 getFullYear()
-
月份推到下个月
有bug setMonth(getMonth() + 1) 如果1.31 -> 2.31 -> 3.3
setDate(32-58)
setDate(1-28) setMonth(getMonth() + 1)
-
月份推到上个月
setDate(0/-1/-2/-28)
setDate(1-28) setMonth(getMonth() - 1)
-
上个月的天数
setDate(0)
-
本月的天数
setDate(32) setDate(0)
-
定时器的语法 setInterval(fn , time , 第一个函数的参数)
-
截取字符串的方法
slice(i,i) substr(i,n) substring(i,i)
-
对象的深拷贝
var obj = {}
var obj2 = {} ;
遍历obj for in
-
基本数据类型和引用数据类型的区别
基本数据类型存储的是值
引用数据类型存储的是地址
注册验证
<p>
请输入用户名：
<input type="text" id="user">
<span id="userSpan">用户名在3-6个字符，且只能是数字，字母组成，数字不能开头span>
</p>
<p>
请输入密码：
<input type="password" id="pwd">
<span id="pwdSpan">密码在3-6个字符，且只能是数字，字母组成(密码强度验证)span>
</p>
<p>
请输入验证码：
<input type="password" id="code">
<span id="codeSpan">验证码span>
</p>
<button id="btn">注册button>
<script>
// 那对象
var oUser = get('user') ;
var oUserSpan = get('userSpan') ;
var oBtn = get('btn') ;
var numArr = [] ;
for(var i = 0 ; i < 10 ; i++) {
numArr.push(i + '') ;
}
var smallArr = [] ;
for(var i = 97 ; i <= 122 ; i++) {
smallArr.push(String.fromCharCode(i))
}
var bigArr = [] ;
for(var i = 65 ; i <= 90 ; i++) {
bigArr.push(String.fromCharCode(i))
}
var allArr = numArr.concat(smallArr , bigArr) ;
function tips(obj , msg , color) {
obj.innerHTML = msg ;
obj.style.color = color ;
}
function get(id) {
return document.getElementById(id)
}
oBtn.onclick = function () {
// 验证用户名 -- 去掉首尾空格
var username = oUser.value.trim() ;
// 为空
if(username === '') {
tips(oUserSpan , '输入不能为空' , 'red') ;
return
}
// 长度
if(username.length < 3 || username.length > 6) {
tips(oUserSpan , '长度必须早3-6之间' , 'red') ;
return
}
// 数字开头 -- 判断第一个字符是不是数字
// if(username[0] <= 9 && username[0] >= 0) {
// includes 都是严格判断(数据类型也必须是一样的)
if(numArr.includes(username[0])) {
// if(!isNaN(username[0])){
tips(oUserSpan , '不能用数字开头' , 'red') ;
return
}
// 必须是字母，数字组成
for(var i in username) {
if(!allArr.includes(username[0])) {
tips(oUserSpan , '用户名只能是字母和数字' , 'red') ;
return
}
}
// 密码的验证
var password = get('pwd').value.trim() ;
var oPwdSpan = get('pwdSpan') ;
var count1 = 0 ; // 数字
var count2 = 0 ; // 小写
var count3 = 0 ; // 大写
// for(var i in password) {
// if(numArr.includes(password[i])) {
// count1 = 1 ;
// break ;
// }
// }
// for(var i in password) {
// if(smallArr.includes(password[i])) {
// count2 = 1 ;
// break ;
// }
// }
// for(var i in password) {
// if(bigArr.includes(password[i])) {
// count3 = 1 ;
// break ;
// }
// }
for(var i in password) {
// 如果有数字就标记为1
if(numArr.includes(password[i])) {
count1 = 1 ;
}
// 如果有小写就标记为1
if(smallArr.includes(password[i])) {
count2 = 1 ;
}
// 如果有大写就标记为1
if(bigArr.includes(password[i])) {
count3 = 1 ;
}
}
var count = count1 + count2 + count3 ;
if(count === 1) {
tips(oPwdSpan , '弱' , 'red')
}
if(count === 2) {
tips(oPwdSpan , '中' , 'yellow')
}
if(count === 3) {
tips(oPwdSpan , '强' , 'green')
}
}
定时器
定时器
语法 : setInterval(fn , time)
变量存储的是一个数字（页面当中的第几个定时器）
定时器是异步的
清除定时器 clearInterval(第几个定时器)
js 单线程的语言
代码正常从上往下执行
但是有一些特殊的功能：异步
图片的请求，数据的请求 --- 需要服务器响应(需要时间的)
定时器和延时器以及点击事件 -- 不是立即执行的(需要时间，或者需要用户)
js的所有代码都在主线程上执行
同步先执行
异步存放在任务队列中(任务队列不能执行任务,而是任务到时间了之后去主线程上执行)
var t = setInterval(function () {
console.log(666);
} , 1000)
console.log(1);
clearInterval(t)
倒计时
<h1 id="h"></h1>
var oH1 = document.getElementById('h') ;
var count = 10 ;
oH1.innerHTML = count + 's' ;
var t = setInterval(function () {
// count-- ;
oH1.innerHTML = --count + 's' ;
if(count === 0) {
clearInterval(t)
}
},1000)
按钮计时器
<button id="btn">开始</button>
<button id="pause" disabled>暂停</button>
<button id="end" disabled>结束</button>
<span id="span">0</span>
var oBtn = document.getElementById('btn') ;
var oSpan = document.getElementById('span') ;
var oPause = document.getElementById('pause') ;
var oEnd = document.getElementById('end') ;
// 每次点击的时候都会重新调用这个函数
// oBtn.onclick = function () {
// // var t ;
// if(oBtn.innerHTML === '开始') {
// oBtn.innerHTML = '暂停'
// // 声明的这个t是一个局部变量
// var t = setInterval(function () {
// oSpan.innerHTML++ ;
// },1000)
// }
// else {
// // 定时器没有被清除
// console.log(t); // undefined
// clearInterval(t)
// oBtn.innerHTML = '开始'
// }
// }
// 存储定时器的变量必须在点击事件外面声明 -> 也就是说他必须是一个全局变量
// var t ;
// oBtn.onclick = function () {
// if(oBtn.innerHTML === '开始') {
// oBtn.innerHTML = '暂停'
// // 声明的这个t是一个局部变量
// t = setInterval(function () {
// oSpan.innerHTML++ ;
// },1000)
// }
// else {
// // 定时器没有被清除
// console.log(t); // undefined
// clearInterval(t)
// oBtn.innerHTML = '开始'
// }
// }
// var t ;
// oBtn.onclick = function () {
// // 每次点击的时候，都清除上一个定时器
// clearInterval(t)
// t = setInterval(function () {
// oSpan.innerHTML++ ;
// },1000)
// }
var t ;
oBtn.onclick = function () {
oBtn.disabled = true ;
oPause.disabled = false ;
oEnd.disabled = false ;
t = setInterval(function () {
oSpan.innerHTML++ ;
},1000)
}
oPause.onclick = function () {
clearInterval(t)
oPause.disabled = true ;
oBtn.disabled = false
}
oEnd.onclick = function () {
clearInterval(t)
oSpan.innerHTML = 0 ;
oEnd.disabled = true ;
oBtn.disabled = false ;
oPause.disabled = true ;
}
// var n ;
// function fn() {
// n = 5 ;
// }
// console.log(n); // undefined
// fn()
// console.log(n); // 5
小广告
<style>
.ad{
width: 300px;
height: 200px;
background-color: #ddd;
position: fixed;
right: 0;
bottom: 0;
}
#close{
float: right;
width: 24px;
height: 24px;
background-color: #000;
color: #fff;
text-align: center;
line-height: 24px;
cursor: pointer;
}
</style>
<div class="ad" id="ad">
<span id="close">X</span>
<p>
<span id="time">10</span>
<span>s之后自动关闭广告</span>
</p>
</div>
var oAd = document.getElementById('ad') ;
var oTime = document.getElementById('time') ;
var oClose = document.getElementById('close') ;
// 10s倒计时
var t = setInterval(function () {
oTime.innerHTML-- ;
if(oTime.innerHTML < 0) {
oAd.style.display = 'none' ;
// 倒计时结束之后清除定时器
clearInterval(t);
}
},500)
// 点X关闭
oClose.onclick = function () {
oAd.style.display = 'none' ;
clearInterval(t);
}
cript>
延时器
// 定时器：重复的闹钟
// 延时器：一次性的闹钟
// setTimeout(fn , time)
// 变量存储的是第几个闹钟(不分定时器和延时器)
// setTimeout 也是异步
// clearInterval 可以清除定时器，也可以清除延时器
// clearTimeout 可以清除延时器，也可以清除定时器
var t1 = setInterval(function () {
console.log(777);
},1000)
var t2 = setTimeout(function () {
console.log(666);
},0)
console.log(t1 , t2);
// clearInterval(t1)
clearTimeout(t2)
// clearTimeout(t1)
// clearInterval(t2)
关于异步
<h1 id="h">点我h1>
// 异步：
// 在点击事件里面，绑定是同步的，事件处理函数是异步的
// 在定时器里面，要做的事情是异步的
var t = setTimeout(function () { },1000)
clearInterval(t)
var oH1 = document.getElementById('h');
oH1.onclick = function () {
console.log(666);
}
延时器改定时器
// 延时器：只会执行一次
// setTimeout(function () {
// console.log(666);
// } , 1000)
// 死递归：短时间内内存溢出(递归一定要有结束的条件)
// 每隔1s调用一次函数
function fn() {
setTimeout(function () {
console.log(666);
fn()
} , 1000)
}
fn()
流氓小广告
.ad{
width: 300px;
height: 200px;
background-color: #ddd;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
display: none;
}
#close{
float: right;
width: 24px;
height: 24px;
background-color: #000;
color: #fff;
text-align: center;
line-height: 24px;
cursor: pointer;
}
<div class="ad" id="ad">
<span id="close">X</span>
<p>
<span id="time">10</span>
<span>s之后自动关闭广告</span>
</ p>
</div>
var oAd = document.getElementById('ad') ;
var oTime = document.getElementById('time') ;
var oClose = document.getElementById('close') ;
showAd()
function showAd() {
// 3s之后弹出小广告
setTimeout(function () {
oAd.style.display = 'block'
// 10s倒计时
var t = setInterval(function () {
oTime.innerHTML-- ;
if(oTime.innerHTML < 0) {
oAd.style.display = 'none' ;
// 倒计时结束之后清除定时器
clearInterval(t);
// 广告关闭以后，下次还是10s
oTime.innerHTML = 10 ;
// 3s之后弹出小广告
showAd()
}
},500)
// 点X关闭
oClose.onclick = function () {
oAd.style.display = 'none' ;
clearInterval(t);
// 广告关闭以后，下次还是10s
oTime.innerHTML = 10 ;
showAd()
}
},3000)
}
倒计时
<h1>距离下课还有<span id="time">span></h1>
var oTime = document.getElementById('time') ;
var allSeconds;
var tt = new Date('2021-12-20 16:8:0')
showDate(tt)
var t = setInterval(function () {
showDate(tt);
// allSeconds这个变量本身属于showDate这个函数，所以必须提升为全局变量才可以访问
if(allSeconds <= 0) {
clearInterval(t) ;
oTime.innerHTML = '时间已过期了'
}
},1000)
function showDate(t) {
var future = new Date(t) ;
var now = new Date() ;
// 时间是可以相减的 --- 毫秒数
var gap = future - now ;
console.log(gap);
allSeconds = parseInt(gap / 1000) ;
console.log(allSeconds);
if(allSeconds <= 0) {
oTime.innerHTML = '时间已过期了'
return
}
var h = parseInt(allSeconds / 3600) ;
var m = parseInt(allSeconds % 3600 / 60) ;
var s = allSeconds % 60 ;
oTime.innerHTML = h + ':' + m + ':' + s ;
}
