2019-06-08 webapi 第五天

01复习indesof

<!--

indexOf：查找某个字符在字符串中出现的下标

从左往右起的第一个出现这个字符的下标

如果是多个字母只是出现首字母的下标

如果查找的字符不在这个字符串中，那么会得到-1

反过来说，如果不等于-1，就代表这个字符一定在字符串里面

特殊情况：

如果传一个空字符串，那么会得到0

-->

</head>

<body>

var str = "hello world";

// 我要获取e这个字母的下标

// var res = str.indexOf('o');

// console.log(res);//4

// var res = str.indexOf('wor');

// console.log(res);//6

// var res = str.indexOf(' ');

// console.log(res);//5

// var res = str.indexOf('z');

// console.log(res);//-1

var res = str.indexOf('');

console.log(res);//0

02模拟百度搜索框

<!--

键盘弹起事件：

onkeyup:

因为不管你输入什么，只要输入完了键盘都会弹起，换句话说，键盘弹起了你就是把这个字符输入完了

-->

<style>

* {

margin: 0;

padding: 0;

}

body {

font-size: 20px;

}

.box {

width: 600px;

height: 40px;

margin: 200px auto;

position: relative;

}

#txt {

width: 498px;

height: 38px;

border: 1px solid #eee;

font-size: 20px;

}

#search {

width: 100px;

height: 40px;

}

#keywords {

position: absolute;

top: 40px;

left: 0;

background-color: rgb(12, 255, 24);

list-style: none;

width: 500px;

}

li {

line-height: 24px;

}

/* li:hover{

background-color: #f00;

} */

</style>

</head>

<body>

</div>

</div>

<!--

1. 给文本框加键盘弹起事件

1.1 拿到输入的内容

1.2 遍历数组，判断数组中元素是否包含这个内容

1.3 如果包含，创建li标签，加到ul里面

2. 每次出新结果之前，清空上一次结果

就是在事件里一开始把ul.innerHTML = "";

3. 如果输入的内容为空，会把所有元素都显示出来

解决办法：判断输入的内容是否为空，如果为空，就立刻return（结束函数）

4. 给li加事件

鼠标移入事件，谁移入谁变红

鼠标移出事件，谁移出谁恢复（改为空）

鼠标点击事件，谁点击就把谁的内容放到文本框里，并且清空ul

-->

// 找到ul

var ul = document.getElementById('keywords');

// 找到文本框

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

var keywords = ["林利群", "林利群为什么很黑", "林利群的经纪人是周林林吗", "林利群是谁", "广东人", "广东人爱吃", "广东人爱吃福建人", "林丹的生平", "JavaScript", "Java", "王思聪", "王健林", "社会王", "隔壁老王", "林绿群", "你打球像蔡徐坤", 'aaa', 'bbb','王祖蓝','你打球王祖蓝','唐长老','唐长老和女儿国国王不得不说的故事','唐长老取到真经又如何？始终不见伊人笑'];

// 等用户在文本框输入完了立刻拿到输入的文字，再来遍历数组，看数组元素有没有包含这个文字，包含就做成li标签加到ul里面

// 我有一段代码，要等你输入完了才触发

// onkeyup事件键盘弹起事件

txt.onkeyup = function(){

// 清空上一次结果

ul.innerHTML = "";

var str = this.value;

if(str == ""){

// 立即跳出函数，代码后面代码不执行了

return;

}

// 遍历数组

for(var i = 0; i < keywords.length; i++){

// 拿到数组中每个元素，判断你元素包不包含你输入的这个文字

if(keywords[i].indexOf(str) != -1){

//1.创建li

var li = document.createElement('li');

li.innerHTML = keywords[i];

//2.加到ul

ul.appendChild(li);

// 给每个li加鼠标移入事件

li.onmouseover = function(){

//谁移入，就让谁变红

this.style.backgroundColor = "red";

}

// 给每个li加鼠标移出事件

li.onmouseout = function(){

// 给li颜色为空，代表不给她颜色，不给她颜色就用ul的颜色了

// 默认就是ul的颜色

this.style.backgroundColor = "";

}

// 给每个li加点击事件

li.onclick = function(){

// 把被点击的li，赋值给文本框的value去显示

txt.value = this.innerHTML;

ul.innerHTML = "";

}

03删除子元素

<!--

在原生的JS里，自己想死，还自杀不了，还得找到他爸爸，让他爸爸把他弄死

所以要删一个元素

找到他父元素

父元素的.removeChild() 方法来删除这个儿子

语法：

父元素.removeChild(子元素)

删除父元素下面的某个子元素

-->

</head>

<body>

<ul>

</ul>

//找到li3

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

// 找到按钮，加点击事件

document.getElementById('btn').onclick = function(){

li3.parentNode.removeChild(li3);

}

</script>

04替换子元素

<!--

语法：

父元素.replaceChild( 新元素，被替换的元素 );

如果新元素是已经存在的元素，那么相当于是移动新元素去替换

-->

</head>

<body>

</ul>

// 找到li3

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

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

// 找到ul

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

document.getElementById('btn1').onclick = function(){

var li = document.createElement('li');

li.innerHTML = "新的li";

ul1.replaceChild(li,li3);

}

document.getElementById('btn2').onclick = function(){

ul1.replaceChild(li5,li3);

};

05找第一个子元素和最后一个子元素

<!--

firstChild：找第一个子节点，节点就包括文本、注释、标签

firstElementChild：找第一个子元素，只包括标签

lastChild：找最后一个子节点

lastElementChild：找最后一个子元素

-->

</head>

<body>

</ul>

// 我要找到第一个li

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

// console.log(ul1.firstChild); //回车

// console.log(ul1.firstElementChild);

// console.log(ul1.lastChild); //回车

// console.log(ul1.lastElementChild); //隔壁老王5

// ul1.children[0]

// 找最后一个

// ul1.children[ul1.children.length - 1];

06计时器

<!--

setInterval：计时器

作用：可以让一段代码每隔一段时间执行一次

参数1：要执行的代码，既可以是字符串，也可以是函数

如果只有一句话用字符串方便，如果是有多句话，那么传一个函数会更方便

传函数也可以传一个已经存在的函数，但是记得函数名不要加小括号，例： setInterval(f1,1000);

参数2：间隔时间，以毫秒为单位

-->

// 每隔1000毫秒，去执行console.log(1); 1000毫秒 = 1秒

// setInterval('console.log(1);',1000);

// setInterval('console.log(1);console.log("abc");',1000);

// setInterval(function(){

// console.log(1);

// console.log("abc");

// },1000);

// 函数名其实也是一个变量，只不过它里面存的是代码

function f1(){

console.log('f1被调用了');

}

// console.log(f1);

// console.log(f1());//undefined

// 代表每隔1秒调用一次f1

setInterval(f1,1000);

// 代表立刻调用f1函数，并把返回值也就是undefined给了计时器

setInterval(f1(),1000);

07停止计时器

<!--

setInterval只要开启，你不写代码停止，它就不会停止，直到网页关闭

每个计时器一旦开启，就会有它自己的计时器id，它会通过返回值返回

clearInterval(计时器id)

-->

</head>

<body>

var timerID;

// 开启计时器

document.getElementById('start').onclick = function(){

// 如何保证永远只有一个计时器？

// 开启新计时器之前，先把旧计时器停止，那么就永远只有一个计时器了

clearInterval(timerID);

// 永远只能保存最后一个计时器id

timerID = setInterval(function(){

console.log('....');

},1000);

console.log(timerID);

}

// 停止计时器

document.getElementById('stop').onclick = function(){

// 不管点多少次，停的都是最后一个

clearInterval(timerID);

}

08 setTimeout

<!--

setTimeout也是计时器，用法跟setInterval是一毛一样的

但是它只会执行1次

它相当于是把一段代码延迟执行

-->

// setInterval('console.log("interval")',1000);

// setTimeout用法跟setInterval是一样的，但是setTimeout只能执行1次

// setTimeout('console.log("timeout")',1000);

// setTimeout(function(){

// console.log('1');

// console.log('abc');

// },1000);

</script>

</head>

<body>

var timerID;

document.getElementById('start').onclick = function () {

timerID = setTimeout(function () {

console.log('1');

console.log('abc');

}, 1000);

};

document.getElementById('stop').onclick = function(){

clearTimeout(timerID);

}

</script>

</body>

09复习旋转

<style>

.box{

width: 5px;

height: 180px;

background-color: gold;

margin: 100px auto;

}

/* .box:hover{

transform: rotate(45deg);

} */

</style>

</head>

<body>

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

// 添加点击事件

document.getElementById('btn').onclick = function(){

setInterval(function(){

box.style.transform += "rotate(15deg)";

},200);

}

</script>

10黑马计时器

<style>

.clock {

width: 600px;

height: 600px;

background: url(images/clock.jpg);

margin: 50px auto;

position: relative;

}

.clock>div {

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

background: url(images/hour.png) no-repeat center;

}

#m {

background: url(images/minute.png) no-repeat center;

}

#s {

background: url(images/second.png) no-repeat center;

}

</style>

</head>

<body>

</div>

// 找到时、分、秒的div

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

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

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

function setClock() {

//用Date对象获取当前时间

var now = new Date();

//获取时

var hour = now.getHours();

//获取分

var min = now.getMinutes();

//获取秒

var sec = now.getSeconds();

// 旋转时针：表盘360度，一个表盘12小时，所以每小时为 360 / 12 = 30度

// 算法：现在是几小时，就用几 * 30

// 如果现在是11:30，30分钟就是0.5小时，所以你应该算11.5 * 30度，但是我们现在只是11*30

// 所以应该 11*30 + 分/60 * 30

var hDeg = hour * 30 + min / 60 * 30;

h.style.transform = 'rotate(' + hDeg + 'deg)';

// 算法：表盘360度，一个表盘60分，所以每分钟为 360/60 = 6度

// 算法：现在是几分钟，就用几 * 6

// 分也要考虑秒带来的影响

var mDeg = min * 6 + sec / 60 * 6;

m.style.transform = 'rotate(' + mDeg + 'deg)';

// 秒的度数跟分的是一样的，算法也一样

s.style.transform = 'rotate(' + sec * 6 + 'deg)';

}

// 页面一打开需要立刻调用获取当前时间

setClock();

setInterval(setClock, 1000);

11 offsetwidth和offsetHeight

<!--

offsetWidth:

获取的是盒子最终宽

offsetHeight:

获取的是盒子最终高

它们获取到的直接就是数字，可以直接参与数学运算

只能读取，不能修改（重新赋值），它是只读的

-->

<style>

.box{

width: 100px;

height: 100px;

background-color: #f00;

padding: 10px;

border: 10px solid black;

}

</style>

</head>

<body>

// 找到div

var box = document.getElementsByClassName('box')[0];

// 特点：1.获取到的是带单位的字符串 2.只能获取行内样式，其他样式的宽高获取不了

// console.log(box.style.width);

// console.log(box.style.height);

// 特点：1.获取到的是数字可以直接参与数学运算 2.不管是行内还是内嵌都能获取

console.log(box.offsetWidth);

console.log(box.offsetHeight);

// 不能修改

// box.offsetWidth = 3000;

// box.offsetHeight = 3000;

15 offsetParent

offsetParent：获取的是它定位所参照的父级元素

只要不是固定定位，那么这里获取到的就是它真正定位所参照的父级元素

如果是固定定位，那么打印的是null

如果是静态定位（也就是没有改定位），那么打印的是父盒子

-->

<style>

body{

border-bottom: 1px solid #000;

}

.father{

width: 300px;

height: 300px;

background-color: #0f0;

position: relative;

}

.son{

width: 100px;

height: 100px;

background-color: #f00;

/* position: fixed;

top:50%; */

}

</style>

</head>

<body>

</div>

var son = document.getElementsByClassName('son')[0];

console.log(son.offsetParent);

16 offsetLeft和offsetTop

<!--

offsetLeft和offsetTop

获取到的是自身外边框到他定位所参照的父级元素的内边框的距离

它们统称为offset家族，都是只能获取不能修改

-->

<style>

.grandFather{

width: 500px;

height: 500px;

background-color: #00f;

margin-left: 50px;

position: relative;

border: 10px solid black;

}

.father {

width: 300px;

height: 300px;

background-color: #0f0;

margin-left: 100px;

/* position: relative; */

}

.son {

width: 100px;

height: 100px;

background-color: #f00;

position: absolute;

left: 100px;

top: 80px;

margin-left: 20px;

margin-top: 40px;

border: 10px solid black;

}

</style>

</head>

<body>

</div>

//找到子盒子

var son = document.getElementsByClassName('son')[0];

//获取的是数字类型，可以参与数学运算

console.log(son.offsetLeft, son.offsetTop);

</script>

17 用js实现简单移动动画

//找到div

var box = document.getElementsByClassName('box')[0];

//移动到400的点击事件

document.getElementById('btn1').onclick = function () {

var timerID = setInterval(function () {

// 先获取当前位置

var current = box.offsetLeft;

// 距离大于10代表够走，那么才走这一步

if (400 - current > 10) {

// 每次点击都在当前位置上加10

current += 10;

// 再赋值给left

box.style.left = current + "px";

}else{

//不够走直接到400

box.style.left = 400 + "px";

}

if (current == 400) {

//停止计时器

clearInterval(timerID);

}

}, 50);

}

</script>