20—12—12 星期六 晴
总结：一周总是过得非常快，进入到了第二个阶段的第二周，这周的的知识点很多，但大多数都是靠记忆的，并且有些知识点是可以靠对比来记忆的。第一天，学习了什么叫做定时器，以及用法。定时器分为两类，settimeout，第一个叫做延时定时器，在指定的时间之后开始执行，不会重复执行，只会执行一次。setinterval，第二个叫做重复定时器，会重复执行。二者的语法都一样，都是定时器名称（函数体，时间（单位：毫秒））；有了定时器之后，就有清定时器的方法，同样有两个，二者是一一对应的，clearTimeout，clearInterval。定时器在之后的学习及工作中用途广泛，轮播图，点名器。。。等，所以各位一定要将之学好。放几个案例：
定时器：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,
div img {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div>
<img src="./img/1.jpg" alt="" id="pic">
</div>
<script>
var arr = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg']
var index = 0//数组的索引
var pic = document.getElementById('pic')
var len = arr.length - 1//数组的长度
var t=setInterval(move, 2000)
//添加鼠标进和离开事件
pic.onmouseover = function () {//当鼠标停在图片上时停止计时器
clearInterval(t)
}
pic.onmouseout = function () {//当鼠标离开图片时又重新启动计时器
t=setInterval(move, 2000)
}
//对函数进行封装，以便于后面复用
function move(){
index++;
pic.src = arr[index]
if (index == len) {
index = index == len ? 0 : index;
}
}
</script>
</body>
</html>
定时器弹出小窗口：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,
div img {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div>
<img src="./img/1.jpg" alt="" id="pic">
</div>
<script>
var arr = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg']
var index = 0//数组的索引
var pic = document.getElementById('pic')
var len = arr.length - 1//数组的长度
var t=setInterval(move, 2000)
//添加鼠标进和离开事件
pic.onmouseover = function () {//当鼠标停在图片上时停止计时器
clearInterval(t)
}
pic.onmouseout = function () {//当鼠标离开图片时又重新启动计时器
t=setInterval(move, 2000)
}
//对函数进行封装，以便于后面复用
function move(){
index++;
pic.src = arr[index]
if (index == len) {
index = index == len ? 0 : index;
}
}
</script>
</body>
</html>
接着知识点又讲了math对象，math主要是一些数学相关的知识，math.floor(),此方法用于取整数。
math.abs（）方法，返回参数的绝对值。其中有一个较为重要的方法,叫random方法，此方法返回一个0~1之间的随机数。此方法可以用来生成验证码，以及抽奖等与随机数相关的等等。
案例：随机生成验证码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str = "abcdefghijklmknopqrstuvwxyz0123456789"
var s = ""
for (i = 0; i < 4; i++) {
var t = Math.floor(Math.random() * str.length)//获取随机数的索引
s += str[t]
}
console.log(s);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//计算一个区间内的随机数，用区间最大值减去最小值+最小值
var s = Math.floor(Math.random() * 5 + 5)
console.log(s);
</script>
</body>
</html>
接着讲了简单的盒子动画，向左向右，向上向下移动。总的来讲：简单的盒子运动实际上就是通过不停的改变他的left或top值，此过程呢，较为繁琐，故而封装成函数，以便于以后调用它。
简单运动封装
function move(obj, target, step, attr) {
// 根据起点和终点之间的关系，判定速度的正负
step = parseFloat(getComputedStyle(obj, null)[attr]) > target ? -step : step;//起点>终点?
clearInterval(obj.timer);//清除
obj.timer = setInterval(function () {
var l = parseFloat(getComputedStyle(obj, null)[attr]);//当前的div的属性值
var speed = l + step;// +5 +(-5) 每一次移动到的位置
//到达边界时，
if (speed >= target && step > 0 || speed <= target && step < 0) {
clearInterval(obj.timer);
speed = target;//边界值
}
obj.style[attr] = speed + "px";
}, 20);
}
// function move(obj,tag,stopValue,attr){
// tag=stopValue>parseInt(getStyle(obj,attr))?tag:-tag;
// clearInterval(obj.timer);
// obj.timer=setInterval(function(){
// var speed=parseInt(getStyle(obj,attr))+tag;
// if(speed<=stopValue&&tag<0||speed>=stopValue&&tag>0){
// speed=stopValue;
// }
// obj.style[attr]=speed+'px';
// if(speed==stopValue){
// clearInterval(obj.timer);
// }
// },30);
// }
第二天讲的知识点有两个：时间对象和字符串对象
关于对象：首先要理解对象的概念，什么叫对象；在js中，一切皆为或者都可以被用作对象。可以通过new一个对象或者直接以字面量形式创建变量，所有变量都有对象的性质。注意：通过字面量创建的对象在调用方法和属性时会被对象包装器暂时包装成一个对象，具有对象特征。谈到对象，一般有两个部分，对象属性和对象方法，对象方法；对象属性是指他的特性，对象方法是指他能干神魔事。对对象有了简单的了解之后，接下来就可以去谈时间对象了。
所谓时间对象：就是与时间有关的一些知识。
1.创建时间对象；在调用Date构造函数而不传递参数的情况下，新创建的对象自动获得当前电脑的日期和时间。直接获取特定的时间的特定部分：年月日星期的方法。
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function nowTime() {
var d = new Date();
var year = d.getFullYear();//年
var m = d.getMonth()+1;//月
var day = d.getDate();//日
var week = d.getDay();
var h=d.getHours();//时
var mi=d.getMinutes();//分
var s=d.getSeconds();//秒
week = week == 2 ? "二" : week;
var w="星期"+week
var now=year+"年"+m+"月 "+day+"日"+w+h+":"+":"+mi+":"+s
console.log(now);
}
nowTime();
</script>
</body>
</html>
倒计时案例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box {
width: 500px;
height: 500px;
background: #eee;
margin: 20px auto;
text-align: center;
}
#box h3 {
font-size: 32px;
padding: 30px;
color: white;
}
#box input {
width: 100px;
}
button {
width: 160px;
height: 160px;
background: #000;
margin-top: 30px;
border-radius: 80px;
color: yellow;
font-size: 40px;
}
.p1 span {
font-size: 24px;
color: blue;
}
.p2 {
font-size: 30px;
color: black;
}
.p2 span {
font-size: 40px;
color: blue;
}
</style>
</head>
<body>
<div id="box">
<h3>倒计时</h3>
请输入：<input type="text" value="2020" />年 <input type="text" value="12" />月 <input type="text" value="26" />日
<button>开始</button>
<p class="p1">现在距离- <span>0000</span> -还剩：</p>
<p class="p2"><span>00</span>天 <span>00</span>小时 <span>00</span>分 <span>00</span>秒</p>
</div>
</body>
<script>
var ipt = document.querySelectorAll('input');
var sp = document.querySelectorAll('span');
var btn = document.querySelector('button');
btn.onclick = function () {
sp[0].innerHTML = ipt[0].value;
s2 = ipt[1].value - 1;
s3 = ipt[2].value;
tt();
setInterval(tt, 1000);
function tt() {
var nowT = new Date();
var getT = new Date(ipt[0].value, s2, s3, 0, 0, 0);
var time1 = parseInt((getT - nowT) / 1000);
var d = Math.floor(time1 / 86400);
var h = Math.floor(time1 % 86400 / 3600);
var m = Math.floor(time1 / 60) % 60;
var s = Math.floor(time1 % 60);
console.log(d, h, m, s);
sp[1].innerHTML = addZero(d);
sp[2].innerHTML = addZero(h)
sp[3].innerHTML = addZero(m)
sp[4].innerHTML = addZero(s)
}
}
function addZero(num) {
return num < 10 ? '0' + num : num;
}
// var ipt1=document.getElementById('box').getElementsByTagName('input')[0];
// var ipt2=document.getElementById('box').getElementsByTagName('input')[1];
// var ipt3=document.getElementById('box').getElementsByTagName('input')[2];
// var sp1=document.getElementById('box').getElementsByTagName('span')[0];
// var sp2=document.getElementById('box').getElementsByTagName('span')[1];
// var sp3=document.getElementById('box').getElementsByTagName('span')[2];
// var sp4=document.getElementById('box').getElementsByTagName('span')[3];
// var sp5=document.getElementById('box').getElementsByTagName('span')[4];
// // console.log(ipt1.value);
// console.log(sp1.innerHTML);
// document.getElementById('box').getElementsByTagName('button')[0].onclick=function(){
// sp1.innerHTML=ipt1.value//
// s2=ipt2.value-1//
// s3=ipt3.value//
// time1();
// setInterval(time1,1000)
// function time1(){
// var nowTime=new Date();//当前时间
// var getTime=new Date(sp1.innerHTML,s2,s3,0,0,0)//目标时间
// var time=parseInt((getTime-nowTime)/1000)//时间差
// console.log(time);
// var day=Math.floor(time/86400);//
// var h=Math.floor(time%86400/3600);//
// var m=Math.floor(time/60)%60;//
// var s=time%60;//
// console.log(day,h,m,s);
// sp2.innerHTML=day;
// sp3.innerHTML=h;
// sp4.innerHTML=m;
// sp5.innerHTML=s
// }
// }
</script>
</html>
数字时钟：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="img/1.JPG" alt="">
<img src="img/1.JPG" alt="">
<img src="img/colon.JPG" alt="">
<img src="img/1.JPG" alt="">
<img src="img/1.JPG" alt="">
<img src="img/colon.JPG" alt="">
<img src="img/1.JPG" alt="">
<img src="img/1.JPG" alt="">
</body>
<script>
var pis = document.querySelectorAll('img')
show();
function show() {
var d = new Date();
// console.log(d);
var h = d.getHours();//获取小时
var m = d.getMinutes();
var s = d.getSeconds();
console.log(h, m, s);
var time = addZero(h) + ':' + addZero(m) + ':' + addZero(s);
// console.log(time);
for (i = 0; i < time.length; i++) {
if (isNaN(time[i])) {
pis[i].src = 'img/colon.JPG';
}
else {
pis[i].src = 'img/' + time[i] + '.JPG';
}
}
setTimeout(show,1000);
}
function addZero(num) {
return num < 10 ? '0' + num : num
}
// var pics = document.querySelectorAll('img');
// show();
// function show() {
// var now = new Date();
// var h = now.getHours();
// var m = now.getMinutes();
// var s = now.getSeconds();
// console.log(h, m, s);
// var time = addZero(h) + ":" + addZero(m) + ":" + addZero(s);//就爱那个时间拼接成一个字符串
// console.log(time);
// for (var i = 0; i < time.length; i++) {
// if (isNaN(time[i])) {
// pics[i].src = 'img/colon.JPG';
// //判断如果不是数字
// }
// else {
// pics[i].src = 'img/' + time[i] + '.JPG'
// }
// setInterval(show, 1000)
// }
// }
// // show();
// //判断是否小于10，如果小于十就加0
// function addZero(num) {
// return num < 10 ? "0" + num : num;
// }
</script>
</html>
2.字符串对象
字符串也是我们经常需要处理的东西。为方便使用者，也为我们提供了很多种方法。
1）length方法，字符串的长度，成对单双引号包含的都是字符串。string类型的每一个实例都会有一个length属性，表示字符串中包含多个字符。
2）charAt（）方法，此方法可以通过下标访问对应的字符，语法：stringobject.chartAt（index）
3）charCodeAt（）方法，可以返回指定位置的Unicode编码。这个返回值是0~65535之间的整数。
4）indexOf（）方法可返回某个指定的字符串值在字符串中首次出现的位置。
5）lastindexof（）方法可返回某个指定的字符串值在字符串中最后一次出现的位置。
6）substring（）方法用于提取字符串中介于两个指定下标之间的字符。
7）slice（）方法可以提取字符串中的某个部分，并以新的字符串返回被提取的部分。
上面这两种截取字符串的方法，用法基本一样两种方法都会返回被操作的字符串的一个新的字符串，而且也都能接受一个或两个参数。第一个参数是指定字符串的开始位置，第二个参数表示字符串到哪里结束，即子字符串最后一个字符后面的位置，substring中负数默认为零，slice中负数表示倒数第几个。
8）substr（）方法可以在字符串中抽取从start下标开始的指定数目的字符。
9）split（）方法，字符串分割，用于把一个字符串分割成字符串数组。
10）replace（）方法，替换字符。
案例：
字符串方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str="qwertyuiop"//
var code=""
while(code.length<4){
var s= Math.floor(Math.random()*str.length)
var c=str[s]
if(code.indexOf(c)==-1){
code+=c
}
}
console.log(code);
</script>
</body>
</html>
字符串处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str = "http://localhost:3000?username=jake&pwd=123&tel=123456789";
var obj={};//定义一个空对象，用来存放键值对
var arr = str.split("?")[1];//分离？得到一个数组，取索引值为1的数组
var new1 = arr.split('&');//分割&符得到一个数组
for (i = 0; i < new1.length; i++) {//遍历数组
var ps=new1[i].split('=')//去掉等号
// console.log(ps);
var key=ps[0]//属性名
var value=ps[1]//属性值
obj[key]=value//将属性值赋给对象的属性名
}
console.log(obj);//控制台输出
</script>
</body>
<html>
字符串分割
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str="helloworld"
// var s=str.substr(3,6)//表示从3开始，截取长度为6个的字符串
// var s=str.slice(3,6)//表示从3开始，6结束（不可取6），起始位置不可交换。不能截取字符串
// var s=str.substring(3,6);//表示从3开始，6结束（不可取6)，当起始位置大于终点位置时，先交换顺序，在进行截取
// var s=str.replace('w','*')//替换从第一个字符开始在，指定的字符
var s=str.indexOf("r");
console.log(s,typeof(s));
</script>
</body>
</html>
自动切换选项卡：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
.box {
width: 800px;
border: 1px solid #000000;
margin: 20px auto;
background: blue;
}
.box:after {
content: "";
display: block;
clear: both;
}
#leftBox {
float: left
}
#rightBox {
float: left;
}
#leftBox li {
width: 200px;
height: 89px;
background: red;
margin-bottom: 2px;
color: #fff;
font: 50px/89px "黑体";
text-align: center;
}
#rightBox div {
display: none;
}
#rightBox .active {
display: block;
}
#rightBox a {
display: block;
width: 600px;
height: 100%;
background: #0F0;
font-size: 100px;
color: #000;
text-align: center;
text-decoration: none;
line-height: 360px;
}
#leftBox .active {
background: yellow;
color: #000;
}
</style>
</head>
<body>
<div class="box" id="box">
<ul id="leftBox">
<li class="active">a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<div id="rightBox">
<div class="active">
<a href="#">a1</a>
</div>
<div>
<a href="#">b1</a>
</div>
<div>
<a href="#">c1</a>
</div>
<div>
<a href="#">d1</a>
</div>
</div>
</div>
</body>
<script>
var lf = document.getElementById("leftBox").getElementsByTagName('li');
var ri = document.getElementById("rightBox").getElementsByTagName('div');
var j = 0
var len = lf.length
setInterval(function () {
j++;
clear(lf);
clear(ri);
lf[j % len].className = "active";//给li清样式
ri[j % len].className = "active";//给div清样式
}, 1000)
//封装成一个清样式函数，以便之后复用
function clear(es) {
for (i = 0; i < es.length; i++) {
es[i].className = ""
}
}
</script>
</html>
滚动的文字案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background: #FFFFCC;
}
</style>
</head>
<body>
<p>我们为每一位学员定制个性化求职方案及职业规划，提供一对一修改简历、培训面试技巧、模拟真实面试场景、推荐合作企
业就业等服务。与众多高校和知名企业建立了战略合作伙伴关系，为百度、搜狐、腾讯、新浪、阿里巴巴、凤凰网、360、人民网、
中国教育在线、中青在线、网易、苏宁、滴滴出行、京东、去哪儿、当当网知名IT企业培养输送了大量的互联网人才。</p>
<p style="background: pink;"></p>
</body>
<script>
var p1 = document.getElementsByTagName('p')[0];
var str = String(p1.innerHTML)
var p2 = document.getElementsByTagName('p')[1];
var p3 = ""
var s = str.split("");//将字符串分割分割
// console.log(s);
setInterval(function () {
for (i = 0; i < s.length; i++) {//遍历得到每一个字符，
var d=s[i];
}
p2.innerHTML +=d
}, 1000)
// console.log(p3);
</script>
</html>
indexof用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./img/1.jpg" alt="">
<script>
var pic=document.getElementsByTagName("img")[0];
pic.onclick=function(){
if(pic.src.indexOf("1.jpg")!=-1){
pic.src="./img/2.jpg"
}else{
pic.src="./img/1.jpg"
}
}
</script>
</body>
</html>
