昨天与国家奖学金失之交臂，伤心的哭了一晚上，生活也还是要继续，抹完了眼泪今天继续干我的JavaScript！
目录
- 一、JavaScript的几个常用函数
- 实战下载框制作
- 二、如何获取一个或者多个元素
- 2.1根据ID查找
- 2.2根据class查找
- 2.3根据标签查找
- 2.4创建节点
- 2.5删除一个元素
- 2.6如何修改属性
- 2.7更改img标签的src属性值
- 2.8修改class
- 2.9使用innerHTML来修改内部内容
- 2.10更换页面样式表(网页换肤)
- 三、特殊值及转义字符
- 3.1两个特殊数值NaN和Infinity
- 3.2转义字符的用法
- 3.3未定义(undefined)和空(null)
- 3.4Javascript中的类型转换
- 3.4.1强制类型转换
- 3.4.2自动类型转换
- 四、（实战）倒计时的制作
一、JavaScript的几个常用函数
typeof函数查看变量类型
typeof（变量名）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var value = '甜甜'; // string（字符串）console.log(typeof value);value = 21; // number(数字)console.log(typeof value);value = true; // boolean（布尔型）console.log(typeof value);</script></body>
</html>去运行一下就知道啦，右键检查，去控制台。
setInterval函数(定时器)
setInterval(function(){//每秒钟执行一次此处的代码
},100);
见下面那个实战
setTimeout （延迟执行）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>请等我5秒钟，我会夸你帅！<script>setTimeout("alert('你是最帅的，最帅的人要多等候5秒钟')", 5000 )</script></body>
</html>
实战下载框制作
loading.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#box1{width: 700px;height: 30ox;border: solid 1px khaki;margin-top: 50px;margin-left: 10px;}#box2{width: 0px;height: 30px;background-color: red;}#box3{margin-left: 10px;color: black;}</style></head><body><div id="box1"><div id="box2"></div></div><span id="box3"></span><script type="text/javascript">var i=0;var timger1=setInterval(function(){i=i+10;document.getElementById("box2").style.width=i+"px";document.getElementById("box3").innerHTML=parseInt((i/700)*100)+"%";if(i>=700){clearInterval(timger1);}},100);</script></body>
</html>拿去运行一下就知道了哈哈哈哈
二、如何获取一个或者多个元素
要操作一个元素，首先要找到它。
我们一般有多种方法找到一个元素。
获取到一个元素之后，我们能做什么？
- 能设置这个元素的样式。
- 能获取和设置到这个元素里面的内容（带html结构的）。
- 能获取和设置这个元素里面的文本。
- 能获取和设置这个元素的属性。
- 能删除这个元素。
总结：有了js之后，就可以动态的修改DOM的结构。
这边分享一个小故事，我专业老师当时读的是数学专业，上了大学没有参加什么活动，一心搞学习，结果在大二的时候已经在实习了，完全自学代码，这是我很喜欢听他的课的原因，有次讲了他一个很搞笑的事情，面试的时候，被问到什么是dom，哈哈哈他不知道，就叫回去等结果（完蛋）哈哈哈哈，其实dom就是文档对象模型 (DOM) 是HTML和XML文档的编程接口
2.1根据ID查找
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css"></style><body><a id=lovely href="https://blog.csdn.net/hanhanwanghaha">欢迎关注这个敲可爱的人鸭</a><a id=homepage https://me.csdn.net/hanhanwanghaha">此时我的javascript中没有执行ID为homepage的那段超链接</a><script type="text/javascript">var lovely = document.getElementById("lovely")alert(lovely.innerText)</script></body>
</html>2.2根据class查找
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">.box1{height: 50px;width: 50px;background-color: gold;}.box2{height: 50px;width: 50px;background-color: gold;}.box3{height: 50px;width: 50px;background-color: gold;}</style><body><div class="box1"></div><div class="box1"></div><div class="box2"></div><div class="box3"></div><script type="text/javascript">var list_ok = document.getElementsByClassName("box1");for (var i=0;i<list_ok.length;i++){list_ok[i].style.border = "solid 3px red"; /* 遍历每一个找到的i */}</script></body>
</html>
2.3根据标签查找
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css"></style><body><a id=lovely href="https://blog.csdn.net/hanhanwanghaha">欢迎关注这个敲可爱的人鸭</a><div id="homepage"><a href="https://www.qqtn.com/article/article_124916_1.html">齐天大圣</a></div><script type="text/javascript">var lovely = document.getElementsByTagName("div")alert(homepage.innerText)</script></body>
</html>2.4创建节点
通过js动态地创建
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><div id="div1"><p id="p1">这是第一个段落</p><p id="p2">这是第二个段落</p></div></head><style type="text/css"></style><body><script type="text/javascript">/*1.创建新的<p>元素*/var para=document.createElement("p");/*2.向<p>元素添加文本（首先创建文本节点），（此段代码创建了一个文本节点）*/var node=document.createTextNode("这是新的一个段落");/*向<p>元素追加这个文本节点*/para.appendChild(node);/*最后您必须向一个已有的元素追加这个元素*//*3.这段代码找到一个已有的元素*/var element=document.getElementById("div1");/*4.这段代码向这个已有的元素追加新元素*/element.appendChild(para);</script></body>
</html>2.5删除一个元素
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="div1"><p id="p1">这是第一个段落</p><p id="p2">这是第二个段落</p></div><script type="text/javascript">/*找到父元素*/var parent=document.getElementById("div1");/*找到子元素*/var child=document.getElementById("p1");/*将子元素从父元素中删除*/parent.removeChild(child);</script></body>
</html>如果只知道子元素的id,父元素没有id也没有class,可以使用下面的办法：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
2.6如何修改属性
HTML标签中，有什么属性，就用document.getElementById()得到这个元素之后，点什么属性再进行修改！
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css"></style><body><a id=lovely href="https://blog.csdn.net/hanhanwanghaha">从我的主页转换到B站</a><script type="text/javascript">document.getElementById("lovely").href="https://www.bilibili.com/video/BV1fT4y137yU?from=search&seid=10946771334789229192";</script></body>
</html>
2.7更改img标签的src属性值
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的现女友和前女友</title></head><script type="text/javascript">function change(){document.getElementById("imgs").src = "img/Jolin.jpg";document.getElementById("imgs").title = "前女友"}</script><body><input type="button" value="change" onclick="change()"/><img id="imgs" src="img/pink.jpg" title="现女友" /></body>
</html>
图片可以自己找，我奉上两张个人特别喜欢的人
点击左下角的change
就会变成下图的照片
有什么，就点什么！常见的是：
img 标签的src属性；a标签的href属性、title属性。
2.8修改class
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>欢迎关注</title></head><body><p id="lovely" class=taga >欢迎关注这个敲可爱的人呀</p><script type="text/javascript">document.getElementById("lovely").className = "taglovely"</script></body>
</html>
见下图
在保留class="taga"的基础上再添加一个类名为 hanhan
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>欢迎关注</title></head><body><p id="lovely" class=taga >欢迎关注这个敲可爱的人呀</p><script type="text/javascript">document.getElementById("lovely").className += " hanhan"</script></body>
</html>
2.9使用innerHTML来修改内部内容
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>欢迎关注</title></head><body><div id="lovely">我是周杰伦的小可爱</div><script type="text/javascript">document.getElementById("lovely").innerHTML = "<div>总有一天要让周杰伦认识我</div>";</script></body>
</html>
2.10更换页面样式表(网页换肤)
这边看到一个写的很不错的代码
https://blog.csdn.net/suwu150/article/details/78313803
三、特殊值及转义字符
3.1两个特殊数值NaN和Infinity
NaN(计算错误，类型转换失败)
Infinity(除数为零)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>欢迎关注</title></head><body><script type="text/javascript">console.log(1/0);</script></body>
</html>
运行到谷歌，右键检查就可以就会报下面的东东
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>欢迎关注</title></head><body><script type="text/javascript">console.log("a"/0);</script></body>
</html>
运行到谷歌，右键检查就可以就会报下面的东东
3.2转义字符的用法
如果字符串的数据中出现特殊的符号需求使用转义字符（\）额外处理。
3.3未定义(undefined)和空(null)
变量定义后从未赋值时，该变量的默认值为undefined。
数据类型undefined只有一个值undefined。
注意：undefined代表，一个变量已经定义但是未赋值，默认值是undefined.
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset="utf-8"><title>欢迎关注</title></head><body><script type="text/javascript">var a;console.log(a);//undefined</script></body>
</html>
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
让这个可爱的宝藏女孩在努力的道路上与你一起同行！
如有转载，请注明出处（如不注明，盗者必究）
运行之后右键检查
什么是空(null)？
数据类型null只有一个值null。
可以通过给一个变量赋 null 值来清除变量的内容。
上面蓝色的这句话，我没有特别懂，我问了一下老师，老师是这样回答的
有一个变量，里面装的有值，它就会占用我们的空间，如果说我们把这个值赋值为null，就可以把这个变量释放掉！
经典面试题： null与undefined比较
相同点：null,undefined均代表无值；
不同点：undefined代表一个变量如果没有赋值;
null代表一个对象没找到，那么就为null。
3.4Javascript中的类型转换
什么是类型转换 ？
将一种类型转为另外一种数据类型.例如: 将string类型的’1’转换成数字类型的1.
为什么要进行类型转换 ？
因为数据之间的运算只有同类型之间的运算, 如果不同类型之间存在运算的话,需要将其转换为同一种类型后再进行运算.
类型转换分为两种:
强制类型转换, 自动类型转换
3.4.1强制类型转换
使用parseInt()和parseFloat()将一种类型的数据到数字类型.（常用）
parseInt（变量名）：将变量转换为整数
parseFloat(变量名)：将字符串转为小数
Number (变量名)：将变量转换为数字，只能数字构的成字符串才可以转换
Boolean(变量名)：转换为布尔值，true/false;
String(变量名):转换为字符串；
3.4.2自动类型转换
在运行过程中根据编程语言的运算的语意环境,Javascript会自动进行类型转换.
四、（实战）倒计时的制作
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}body{background-color: pink;}#box1{color: red;font-size: 60px;}</style></head><body><div id="box1"></div><script type="text/javascript">aa();var timer1=setInterval(function(){aa();},1000)function aa(){var endtime=new Date("2021/2/12 00:00:00");var now=new Date();var t=endtime.getTime()-now.getTime();if(t>0){var day=Math.floor(t/1000/60/60/24);var hour=Math.floor(t/1000/60/60%24);var mouth=Math.floor(t/1000/60%60);var second=Math.floor(t/1000%60);var str="距离春节还有"+day+"天 "+hour+"小时 "+mouth+"分 "+second+"秒";document.getElementById("box1").innerHTML=str;}else{clearInterval(timer1);document.getElementById("box1").innerHTML="春节已到！";}} </script></body>
</html>终于写完了。。。
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
让这个可爱的宝藏女孩在努力的道路上与你一起同行！
如有转载，请注明出处（如不注明，盗者必究）
有问题，私信也可，评论也可，看见必回。
移动app MUI框架——混合式开发（一） （敲详细）)
移动app MUI框架——混合式开发（二） 带你项目开发（最新版）)
