• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

心情再差,也还是要拿起我的 JavaScript 实战重点代码

互联网 diligentman 1个月前 (10-26) 21次浏览

昨天与国家奖学金失之交臂,伤心的哭了一晚上,生活也还是要继续,抹完了眼泪今天继续干我的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>

拿去运行一下就知道了哈哈哈哈

二、如何获取一个或者多个元素

要操作一个元素,首先要找到它。
我们一般有多种方法找到一个元素。
获取到一个元素之后,我们能做什么?

  1. 能设置这个元素的样式。
  2. 能获取和设置到这个元素里面的内容(带html结构的)。
  3. 能获取和设置这个元素里面的文本。
  4. 能获取和设置这个元素的属性。
  5. 能删除这个元素。

总结:有了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

心情再差,也还是要拿起我的 JavaScript 实战重点代码
就会变成下图的照片

心情再差,也还是要拿起我的 JavaScript 实战重点代码
有什么,就点什么!常见的是:
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>

见下图
心情再差,也还是要拿起我的 JavaScript 实战重点代码
在保留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>

心情再差,也还是要拿起我的 JavaScript 实战重点代码

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>

运行到谷歌,右键检查就可以就会报下面的东东
心情再差,也还是要拿起我的 JavaScript 实战重点代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎关注</title>
	</head>
	
	<body>
		<script type="text/javascript">
					console.log("a"/0);
		</script>
	</body>
</html>

运行到谷歌,右键检查就可以就会报下面的东东
心情再差,也还是要拿起我的 JavaScript 实战重点代码

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>

运行之后右键检查
心情再差,也还是要拿起我的 JavaScript 实战重点代码
什么是空(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
一个敲可爱的人欢迎您的一键三连

有问题,私信也可,评论也可,看见必回。


喜欢 (0)