心情再差，也还是要拿起我的 JavaScript 实战重点代码
昨天与国家奖学金失之交臂，伤心的哭了一晚上，生活也还是要继续，抹完了眼泪今天继续干我的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（变量名）
<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 （延迟执行）
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
请等我5秒钟，我会夸你帅！
<script>
setTimeout("alert('你是最帅的，最帅的人要多等候5秒钟')", 5000 )
script>
body>
html>
实战下载框制作
loading.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查找
<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>
此时我的javascript中没有执行ID为homepage的那段超链接a>
<script type="text/javascript">
var lovely = document.getElementById("lovely")
alert(lovely.innerText)
script>
body>
html>
2.2根据class查找
<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根据标签查找
<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动态地创建
<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.创建新的元素*/
var para=document.createElement("p");
/*2.向元素添加文本（首先创建文本节点），（此段代码创建了一个文本节点）*/
var node=document.createTextNode("这是新的一个段落");
/*向元素追加这个文本节点*/
para.appendChild(node);
/*最后您必须向一个已有的元素追加这个元素*/
/*3.这段代码找到一个已有的元素*/
var element=document.getElementById("div1");
/*4.这段代码向这个已有的元素追加新元素*/
element.appendChild(para);
script>
body>
html>
2.5删除一个元素
<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()得到这个元素之后，点什么属性再进行修改！
<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属性值
<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
<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
<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来修改内部内容
<html>
<head>
<meta charset="utf-8">
<title>欢迎关注title>
head>
<body>
<div id="lovely">
我是周杰伦的小可爱
div>
<script type="text/javascript">
document.getElementById("lovely").innerHTML = "总有一天要让周杰伦认识我";
script>
body>
html>
2.10更换页面样式表(网页换肤)
这边看到一个写的很不错的代码
https://blog.csdn.net/suwu150/article/details/78313803
三、特殊值及转义字符
3.1两个特殊数值NaN和Infinity
NaN(计算错误，类型转换失败)
Infinity(除数为零)
<html>
<head>
<meta charset="utf-8">
<title>欢迎关注title>
head>
<body>
<script type="text/javascript">
console.log(1/0);
script>
body>
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.
<html>
<head>
<title>欢迎关注title>
head>
<body>
<script type="text/javascript">
var a;
console.log(a);//undefined
script>
body>
html>
运行之后右键检查
什么是空(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会自动进行类型转换.
四、（实战）倒计时的制作
<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
一个敲可爱的人欢迎您的一键三连
有问题，私信也可，评论也可，看见必回。
