likes
comments
collection
share

趣味 js —— 通过趣味案例走进 js 的世界

作者站长头像
站长
· 阅读数 19

1 获取元素的三种基本方式

1.1 通过id名称获取元素:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
<body>
	<p>这是一段话。</p>
	<script>
		var p1 = document.getElementById('p1')	// 获取文档。
		p1.style.color = 'blue'	// 设置文档颜色为蓝色。
	</script>
</body>
</html>
// 输出结果是：蓝色字体的“这是一段话。”
1.2 通过标签名称获取元素:
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>

<script>
var h1s = document.getElementsByTagName('h1')
for(var i = 0;i<h1s.length;i++){
	h1s[i].style.fontSize = 24px	// 设置h1的字体大小为24px。
}
</script>
1.3 通过类别名称获取元素：
<p class="c1">这是一段话</p>
<h1 class="c1">这是一个标题<h1>
<h1>这是第二个标题</h1>
<h1 class="c1">这是第三个标题</h1>

<script>
var ph = document.getElementByClassName('c1')
for(var i =0;i<=c1.length;i++){
	c1[i].style.color = 'red'	// 使每一个c1的字体颜色变为红色。
}

// 输出结果是带有class值的字体颜色变为红色。
</script>
1.4 获取元素基本方式总结：

1.getElementById只能获取一个元素。 2.getElementsByTagName根据标签获取多个元素，并返回一个伪数组。及时获取的元素只有一个，也是以数组的形式储存。 3.style只能设置某一个元素的属性，但是getElementsByTagName返回的是一个数组，所以必须遍历这个数组才可以使用。（可以使用for循环遍历数组。） 4.通过JavaScript操作的css属性，与css不相同：

  • 如果css属性是一个单词，写法保持不变。（如：color，width等）。
  • 如果css属性是多个单词组合而成，则需要将第一个单词首字母小写，其他首字母大写，并去除连接符。（如：background-color，font-size等）。
1.5 HTML5新增的获取元素方式：

1.在HTML5中，新增的获取元素方式是：querySlector和querySlectorAll。 2.querySlector只能获取符合条件的第一个元素，而querySlectorAll可以获取符合条件的所有元素。 3.这个方法可以通过id，类别名称和标签名称获取元素，在使用的时候要遵循以下规则：

  • id在前面加上 #
  • 类别名称在前面加上 .
  • 标签名称前面什么也不加

2 JavaScript操作元素样式

  • 操作元素样式有两种方法：
2.1.style.css属性操作，只能一个一个地设置元素样式。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	
<body>
	<div class="box">hello!</div>
	<script>
		// 这样设置重复代码太多，看起来会太繁琐。
		var div = document.querySelector('div')
		div.style.width = '300px'
		div.style.height = '150px'
		div.style.textAlign = 'center'
		div.style.border = '1px solid black'
		div.style.lineHeight = '150px'
		div.style.color = 'blue'
	</script>
</body>
</html>
2.2.className方法操作，可以一次设置多个样式。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			width:300px;
			height:150px;
			text-align:center;
			border:1px solid black;
			line-height:150px;
			color:blue;
		}
	</style>
<body>
	<div>hello!</div>
	<script>
		var div = document.querySelector('div')
		div.className = 'box'	// 使用className同时设置多个样式。
	</script>
</body>
</html>

3 JavaScript操作元素属性：

  • 图片元素的属性操作
<img src="" alt="">	/*用JavaScript可以操作src属性。*/
<script>
	// 先获取img的src属性，再进行操作。
	document.querySlector('img').src = '图片路径'
</script>
  • 表单元素的属性操作
<input type="text" name="" id="">
<script>
	// 先获取img的src属性，再进行操作。
	document.querySlector(input).value = '请输入用户名：'
</script>

4 JavaScript改变元素内容：

  • 通过JavaScript中的innerHTML方法对HTML中的内容进行更改。
<p>内容</p>
<script>
	// 先获取div里的内容，再进行修改。
	var p = document.querySlector('p')
	console.log('p.innerHTML')	// 在控制台显示内容
	// 对p标签中的内容进行修改。
	p.innerHTML = 'content'	// p标签中的内容会变成content。
</script>

5 事件基础：

  • 事件：浏览器在时刻监视着用户在页面上的行为，这些行为叫做用户事件。
  • 用户做了某个行为，就会触发相应的事件。
  • 开发者编写代码告诉浏览器，当用户触发了某个事件后，去执行的代码。
5.1 鼠标的单击事件：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		button{
			width: 100px;
			height: 50px;
			text-align: center;
			line-height: 50px;
		}
	</style>
<body>
	<button>点击会有惊喜</button>
	<script>
		// 使用onclick（鼠标单击事件）
		document.querySelector('button').onclick = function (){
			alert('哆啦A孟最帅了，我爱哆啦A孟！！！')
		}		// 结果是：单击按钮，网页弹出内容。
	</script>
</body>
</html>

6 换肤案例：

  • 简单的换肤案例就是通过单击图片给背景更换背景图，需要采用JavaScript的单击事件。
换肤代码示例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			font-size: 0; /*目的是为了取消图片之间的间隔*/
		}
		body{
			transition: all 1s;
		}
		.class{
			width: 1400px;
			background-color: rgba(0, 0, 0, .5);
			margin: 0 auto;
		}
		.class img{
			width: 280px;
			margin-left: 20px;
			cursor: pointer;	/* 鼠标移动到图片上，会变成小手 */
			border-radius: 10px; /* 设置图片的圆角 */
		}
		.class :first-child{
			margin-left: 110px;
		}
		.active{
			/* border: 2px solid blue;	设置一个蓝色实线，2px的边框 */ 
			transition: all 1s;
			transform: scale(1.1);
		}
	</style>
<body>
	<div class="class">
		<img src="images/bg1.jpeg" alt="">
		<img src="images/bg2.jpeg" alt="">
		<img src="images/bg3.jpeg" alt="">
		<img src="images/bg4.jpeg" alt="">
	</div>
	<script>
		// 设置默认的背景是第一张图片。
		document.body.style.backgroundImage = 'url(images/bg1.jpeg)'
        
        // 使背景图覆盖body，以免出现背景不是完整图片的情况。
        document.body.style.backgroundSize = 'cover'
		
        var imgs = document.querySelectorAll('img')	// 获取所有的图片
		
        // 使用for循环为每一个图片注册单击事件。
        for(var i=0;i<imgs.length;i++){
			imgs[i].onclick=function(){
				// 单击图片事件执行的函数代码。
				document.body.style.backgroundImage = `url(${this.src})`	// 实现给更换背景。
                
                reset()	// 函数调用
				// 为img标签添加class属性，值为 active。
                this.className = 'active'	// 效果：点击图片会在图片上产生蓝色边框。
			}
		}
        
        // 排他思想
		function reset(){
			for(var i = 0;i<imgs.length;i++){
				imgs[i].className = ''	// 清除imgs的样式。
			}
		}
	</script>
</body>
</html>
总结知识点：
  1. 使用for循环遍历所有的元素，可以同时为每一个元素进行操作，使代码更为简洁。
  2. transform属性用来转换元素的2D和3D，实现元素的旋转，缩放，移动和倾斜。
  3. transition表示检测元素当前的属性，如果发生改变，会在规定时间内完成改变。语法为：
    • transition: all 1s; 即检测当前元素的所有属性，如果发生改变，会在1s内完成改变。
    • transition: width 1s;即检测当前元素的width值，如果发生改变，会在1s内完成改变。

1 分时问候：

  • 分时问候实例：
// 分时问候：获取当前时间，根据时间展示不同的页面内容。

var now = new Date()
var hours = now.getHours()
if(hours<12){
	document.body.style.backgroundImage = 'url(images/bg1.jpeg)'
}else if(hours>12 && hours<18){
	document.body.style.backgroundImage = 'url(images/bg2.jpeg)'
}else{
	document.body.style.backgroundImage = 'url(images/bg3.jpeg)'
}

// 如果是上午，展示bg1那张图片。
// 如果是下午，展示bg2那张图片。
// 如果是晚上，展示bg3那张图片。

2 密码的显示与隐藏：

  • 显示和隐藏密码就是将input标签的type属性text和password的互换。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 300px;
			border-bottom: 1px solid #eee;
			margin: 100px auto;
		}
		img{
			width: 25px;
			height: 16px;

		}
		input{
			border: none;	/*去除边框*/
			outline: none;	/*去除轮廓线*/
			padding-bottom: 10px;
		}
	</style>
<body>
	<div class="box">
		<input id="btn" type="password">
		<img src="./images/睁眼.png" alt="">
	</div>
	<script>
		// 显示和隐藏密码就是将input标签的type属性text和password的互换。
		var img = document.querySelector('img')
		var input = document.querySelector('input')
		// 创建变量用于控制input的状态变化。
		var flag = false
		img.onclick = function(){
			if(flag == false){
			// 点击图片，切换为密码可见，并将图片换为睁眼。
				input.type = 'text'
				this.src = './images/睁眼.png'
				flag = true
			}else{
			// 点击图片，切换为密码隐藏，并将图片换为闭眼。
				input.type = 'password'
				this.src = './images/闭眼.png'
				flag = false
			}
		}
	</script>
</body>
</html>

3 关闭二维码：

  • 关闭二维码案例：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 150px;
			height: 150px;
			margin: 50px auto;
			position: relative;	/*相对定位*/
		}
		.close{
			position: absolute;	/*绝对定位*/
			left: -22px;
			top: 0px;
			border: 1px solid #aaa;
			width: 20px;
			height: 20px;
			text-align: center;
			line-height: 20px;
			cursor: pointer;
		}
	</style>
<body>
	<div class="box">
		<img src="./images/tianmao.png" alt="">
		<div class="close">X</div>
	</div>
	<script>
		document.querySelector('.close').onclick = function(){
			// 让二维码消失
			document.querySelector('.box').style.display = 'none'
		}
	</script>
</body>
</html>

4 密码长度验证：

  • 密码长度验证实例： 1.onfocus事件会在对象获取焦点时触发。 2.onblur事件会在对象失去焦点时触发。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			margin: 0 auto;
			width: 300px;
			height: 200px;
			font-size: 8px;
			line-height: 200px;
		}
		.message{
			float: right;
		}
	</style>
<body>
	<div class="box">
		<input id="wenben" type="text" value="请输入密码：">
		<div class="message">
			<img src="./images/zc.png" alt="">
			<span id="info">请输入6-16位密码。</span>
		</div>
	</div>
	<script>
		// 在文本框中的 focus 事件中，将文本框中的value属性设置为空字符串
		var password = document.querySelector('#wenben')
		wenben.onfocus = function(){
			var val = this.value
			if(val == '请输入密码：'){
				this.value = ''
			}
		}
		// 在文本的 blur 事件中，判断用户输入的密码是否符合要求
		wenben.onblur = function(){
			var len = this.value.length
			if(len>=6 && len<=16){
				document.querySelector('img').src = './images/zq.png'
				document.querySelector('#info').innerHTML = '输入的密码正确！'
				document.querySelector('#info').style.color = 'green'
			}else{
				document.querySelector('img').src = './images/cw.png'
				document.querySelector('#info').innerHTML = '输入的密码错误！'
				document.querySelector('#info').style.color = 'red'
			}
		}
	</script>
</body>
</html>

5 表格的隔行换色：

  • style代码：
<style>
		*{
			margin: 0;
			padding: 0;
		}
		table{
			width: 80%;
			line-height: 50px;
			text-align: center;
			border: 1px solid #eee;
			margin: 50px auto;
			border-collapse: collapse;
		}
		th,td{
			border: 1px solid #eee;
		}
		.odd{
			background-color: skyblue;
		}
		.even{
			background-color: whitesmoke;
		}
	</style>
  • javascript详细代码：
// 遍历整个tbody中的tr，获取所有的tr。
		var trs = document.querySelectorAll('tbody tr')
		for(var i=0;i<trs.length;i++){
			if(i%2 == 0){
				trs[i].className = 'odd'
			}else{
				trs[i].className = 'even'
			}
			// 为tr注册 onmouseover 事件
			trs[i].onmouseover=function(){
				this.style.backgroundColor = '#ccc'
			}
			// 为tr注册 onmouseovut 事件
			trs[i].onmouseout=function(){
				this.style.backgroundColor = ''
			}
		}
  • 上述代码实现效果如下： 趣味 js —— 通过趣味案例走进 js 的世界

总结：

1.onmouseover事件：鼠标移动到对象上面，触发onmouseover事件，执行事件下的函数代码。

  • 代码格式： 
    this.onmouseover = function(){
	函数体
}

2.onmouseout 事件：鼠标离开对象，触发onmouseout事件，执行事件下的函数代码。

  • 代码格式： 
    this.onmouseout = function(){
	函数体
}