HTML+CSS+JS总结

想躺平的咸鱼

已于 2023-08-16 10:25:50 修改

阅读量8.2k

点赞数 4

文章标签： html javascript css

于 2022-08-28 21:24:24 首次发布

本文链接：https://blog.csdn.net/m0_51480841/article/details/126574647

版权

HTML

一、HTML概念和结构

1、概念：

HTML是超文本标记语言是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

2.结构：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>head包裹着的头部部分</title>
	</head>
	<body>
        这是主体部分
		hello，world！
	</body>
</html>

二.HTML标签

标签的概念

一个html文件是由标签和元素组成的

HTML 标签是由尖括号包围的关键词，比如< html >
HTML 标签通常是成对出现的，比如 < b > 和 < /b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签

常见标签

标签名	标签类型	作用
标题标签hn(h1——h6)	双标签	用于设置标题标签中含有部分样式以区分标题和正文
段落标签（p）	双标签	主要用于将一段内容包裹起来，便于后期的统一设置，p标签本身没有效果,标签内的内容与标签外的内容空一行（自动换行）
换行标签(br)	单标签	用于换行
水平线标签(hr)	单标签	生成一条水平线
图片标签(img)	双标签	在页面中引入图片
背景音乐(audio)	双标签	在页面中引入音乐
视频(video)	双标签	引入视频
超链接标签(a)	双标签	关联多个页面
列表标签(有序列表:ol)	双标签	在页面中生成一个有序列表
无序列表(ul)	双标签	在页面中生成一个无序列表
自定义列表(dl)	双标签	在页面中生成一个自定义列表
表格标签(table)	双标签	在页面中生成一个表格
div标签	双标签	定义文档中的节
span标签	双标签	span标签是一个行级元素

html的标签还有很多包括input,from等等

html标签对照表

css

一、css的概念和特性

1、概念

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

2、特性

1:继承性:父元素的样式会被子元素.
2:层叠性:一个元素可以有多个样式效果进行叠加.
3:优先级:浏览器默认样式<标签的默认样式

3、css的三种使用方式

1:内联样式,直接在标签上

2:内部样式:在head标签中通过style标签使用样式,style中间只能放css语言

3:外部样式:在head标签中使用link标签引入css文件进行样式的使用

4、css选择器

1：概念

selector,根据某个特征,找到标签.

2：分类

1:标签选择器:根据标签的名字,选择到对应的标签(当前html页面中的该标签都会被选择出来)
2:id选择器:根据标签的id,选择标签.(一个htnml页面,id是唯一的,只会选择出一个符号符合条件)
3:class选择器:根据标签的class属性,选择标签(一个html页面,class允许重复,可以选择出多个符号条件的标签)
4:分类选择器:元素选择器和class或id选择器一起使用
5:分组选择器:选择器1,选择器2,选择器3…选择器n

此外还有派生选择器、伪类选择器等等

5、css常用样式

样式	作用
width/height	设置宽高
font-style	设置字体样式
background	设置背景样式
list-style	设置列表样式
margin/padding	设置内外边距
display	设置显示方式
position	设置元素定位
border	设置边框样式

css样式对照表

js

一、js的概念和特点

1、概念

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

2、特点

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript是弱类型的语言

3、三种使用方式

1.事件定义的方式
2.js嵌入到html页面,通过script标签来使用
3.把js相关内容写在单独的.js文件中,再html页面上通过script标签的src属性引入

4、js的使用

1、猜数游戏

1.Math.random(),得到[0,1)之间的随机数
2.parseInt(),取整,将字符串转换为整数
3.元素.innerHTML给标签元素内部嵌套其他html内容
4.元素.innerText给标签元素内部嵌套文本内容
5.isNaN,js的一个函数,判断某个变量是否为数字

<script>
			let num = parseInt(Math.random() * 101);
			function getvalue() {
				let num1 = document.getElementById('num').value;
				if (num1 > 100 || num1 < 0||num1==''||isNaN(num1)) {
					document.getElementById('tishi').innerHTML = "请输入0-100的整数"
				} else if (num1 < num) {
					document.getElementById('tishi').innerHTML = "小了";
				} else if (num1 == num) {
					document.getElementById('tishi').innerHTML = "恭喜你猜对了,如果要继续请刷新页面";
				} else {
					document.getElementById('tishi').innerHTML = "大了";
				}
			}
		</script>

2、单击之后，启动一个定时器，隔4秒发一个消息。

1、οnclick=“change(this)” – this代表的就是当前触发单击事件的元素对象。

2、eval的函数的使用：如果eval的参数符号运算表达式，可以计算结果，否则抛出异常。

3、js提供的周期性定时器函数.-- 间隔多长时间，重复执行某个函数 setInterval(function , 时间毫秒数)， js中函数的参数可以是函数类型。

		<div id="cont">
		</div>
		<input type="text" id="inp1">
		<input type="button" id="boy" value="男生" onclick="nan()">
		<input type="text" id="inp2">
		<input type="button" id="girl" value="女生" onclick="nv()">
		<script>
			let div=document.getElementById('cont')
			let arr=["你好","在吗","早上好"]
			function nan(){
				// setInterval(function(){
				// 	let num=parseInt(Math.random()*3)
				// 	div.innerHTML+="<p class='boy'>"+arr[num]+"</p>"
				// },1000)
				let zhi = document.getElementById("inp1").value
				let num=parseInt(Math.random()*3) 
				div.innerHTML+="<p class='boy'>"+zhi+"</p>"
				document.getElementById('inp1').value=""
				div.scrollTop=div.offsetHeight
			}
			
			function nv(){
				let zhi = document.getElementById("inp2").value
				div.innerHTML+="<p class='girl'>"+zhi+"</p>"
				document.getElementById('inp2').value=""
				div.scrollTop=div.offsetHeight;
			}
		</script>

3、动态时钟，图片轮播

1、js中没有方法重载: 重名的方法，后定义会覆盖先定义的。

2、js中的arguments对象：方法调用的时候，所有的参数都是保存在arguments对象中的，arguments本质就是数组。

3、二维数组，数组的元素依然是一个数组。

4、js的Array对象: 长度可变，数组元素可以是任意类型。可以通过数组下标的方式操作数组。push方法可以在数组末尾增加元素， pop方法可以在数组中弹出最后一个元素。创建数组 : 数组元素可以是任意类型。

动态时钟

	<body>
		<button onclick="start()">开始</button>
		<button onclick="stop()">停止</button>
		<p id="time" style="width: 200px;height: 40px;line-height: 40px;color: #008000;"> 
			
		</p>
		<script>
			function showtime(){
				document.getElementById('time').innerHTML=new Date().toLocaleTimeString()
			}
			let timer
			function start(){
				//启动定时器之前,先关闭定时器
				showtime()
				stop()
				timer= setInterval(showtime,1000)//等待1s后,再执行showtime
			}
			function stop(){
				clearInterval(timer)
			}
			//定义一个span标签,使用定时器,每隔50s往右移动5px,直到移动到右边界,则停止
		</script>
	</body>

图片轮播

	<body>
		<div id="div" style="height: 500px;width: 500px;background-color: skyblue;position: relative;">
		</div>
		<li onmouseover="xt(0)" onmouseout="start()"></li>
		<li onmouseover="xt(1)" onmouseout="start()"></li>
		<li onmouseover="xt(2)" onmouseout="start()"></li>
		<li onmouseover="xt(3)" onmouseout="start()"></li>
		<script>
			let arr = ['<img src="../img/img1.webp">', '<img src="../img/img2.webp">', '<img src="../img/img3.webp">',
				'<img src="../img/img4.webp">'
			]
			let i = 0
			let j = 0
			let list = document.getElementsByTagName('li')

			function change() {
				if (i >= 0 && i < 3) {
					if (i > 0) {
						list[i - 1].style.border = ""
					}
					if (i == 0) {
						list[3].style.border = ""
					}
					document.getElementById('div').innerHTML = arr[i]
					list[i].style.border = "2px solid white"
					i++
					j = i
				} else if (i == 3) {
					list[i - 1].style.border = ""
					document.getElementById('div').innerHTML = arr[i]
					list[i].style.border = "2px solid white"
					i = 0
					j = 4;
				}
			}

			let m = 10
			for (let i = 0; i < list.length; i++) {
				list[i].style.left = m + "px"
				m += 30
			}
			change()
			let js 
			function xt(a) {
				clearInterval(js)
				list[j - 1].style.border = ""
				document.getElementById('div').innerHTML = arr[a]
			}
			function start(){
				clearInterval(js)
				js=setInterval(change, 3000)
			}
			start()
		</script>
	</body>

4、正则表达式

1.能出现哪些字符 [字符],\d表示纯数字等价于[0-9],\w 匹配字母数字等价于[0-9a-zA-Z]
2.能出现的字符个数 {n},{n,m},+(至少一次),?(0或者1),*(任意)
3.开始匹配(行首) ^
4.结尾匹配(结尾) $

5…等价于任意内容

6.\用于转义

7.()用于分组

8.|表示或

9.i(忽略大小写),g(全局查找)

test()函数:测试字符串是否满足正则表达式的要求,满座返回true,不满做返回false

判断字符串是否符合邮箱的规则

str = "fim@qq.com"
			let reg2 = /^\w+@\w+(\.\w+)+$/
			console.log(reg2.test(str));

表单输入内容校验

<body>
		<h3>注册界面</h3>
		<form action="http://www.baidu.com">
			<label for="">用户名</label>
			<input type="text" name="uname" onfocus="clearUname(this)" onblur="validNameMsg(this)">
			<span id="unameMsg"></span>
			<br>
			<label for="">邮箱</label>
			<input type="text" name="email" onfocus="clearEmail(this)" onblur="validEmailMsg(this)">
			<span id="emailMsg"></span>
			<br>
			<label for="">身份证号</label>
			<input type="text" name="ID" onfocus="clearID(this)" onblur="validIDMsg(this)">
			<span id="IDMsg"></span>
			<br>
			<label for="">手机号</label>
			<input type="text" name="phone" onfocus="clearPhone(this)" onblur="validPhoneMsg(this)">
			<span id="phoneMsg"></span>
			<br>
			<input type="submit" value="提交" id="submit">
		</form>
		<script>
			//用户名规则:至少5个字符
			//input标签获取焦点的时候,隐藏span标签的内容,input标签失去焦点,
			//校验输入的数据是否符合正则表达式的要求, 符合提示可以使用, 不符合提示错误信息.不符合提示错误信息

			function clearUname(obj) {
				//把span标签的内容清除掉
				let span = document.getElementById('unameMsg')
				obj.value = "" //获取焦点的时候清除标签原有的value值
				if (span.innerText) {
					span.innerText = ""
				}
			}
			function clearPhone(obj) {
				//把span标签的内容清除掉
				let span = document.getElementById('phoneMsg')
				obj.value = "" //获取焦点的时候清除标签原有的value值
				if (span.innerText) {
					span.innerText = ""
				}
			}
			function clearEmail(obj) {
				//把span标签的内容清除掉
				let span = document.getElementById('emailMsg')
				obj.value = "" //获取焦点的时候清除标签原有的value值
				if (span.innerText) {
					span.innerText = ""
				}
			}
			function clearID(obj) {
				//把span标签的内容清除掉
				let span = document.getElementById('IDMsg')
				obj.value = "" //获取焦点的时候清除标签原有的value值
				if (span.innerText) {
					span.innerText = ""
				}
			}

			function validNameMsg(obj) {
				//1.获取输入框的内容
				let str = obj.value
				let reg = /^.{5,}$/
				let span = document.getElementById('unameMsg')
				if (reg.test(str)) {
					let reg1 = /[ 妈党死逼]/g
					if (reg1.test(str)) {
						span.innerText = "用户名中不能包含空格或者敏感字符"
					} else {
						span.innerText = "√"
						return true;
					}
				} else {
					span.innerText = "用户名长度必须大于等于5位"
					return false
				}
			}
			function validEmailMsg(obj){
				let span = document.getElementById('emailMsg')
				let str = obj.value
				let reg = /^\w+@\w+(\.\w+)+$/
				if(reg.test(str)){
					span.innerText = "√"
					return true
				}else{
					span.innerText = "邮箱格式不正确"
					return false
				}
			}
			function validPhoneMsg(obj){
				let span = document.getElementById('phoneMsg')
				let str = obj.value
				let reg=/^1[3659]\d{9}$/
				if(reg.test(str)){
					span.innerText = "√"
					return true
				}else{
					span.innerText = "手机号格式不正确"
					return false
				}
			}
			function validIDMsg(obj){
				let span = document.getElementById('IDMsg')
				let str = obj.value
				let reg= /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
				if(reg.test(str)){
					span.innerText = "√"
					return true
				}else{
					span.innerText = "身份证号格式不正确"
					return false
				}
			}
			//如果用户输入的数据校验正确,执行submit事件,否则不执行
			//单击事件返回值为false,那么就会阻止提交
			document.getElementById('submit').onclick=function(){
				let ipt=document.getElementsByName('uname')[0]
				let email=document.getElementsByName('email')[0]
				let ID=document.getElementsByName('ID')[0]
				let phone=document.getElementsByName('phone')[0]
				if(validNameMsg(ipt)&&validNameMsg(email)&&validIDMsg(ID)&&validPhoneMsg(phone)){
					return true
				}else{
					return false
				}
			}
		</script>
	</body>

5、bom的含义dom节点操作

1:含义

bom:浏览器对象模型(browser object model)

dom:文档对象模型(document object model)

bom和dom的关系:dom是属于bom的一部分,bom:docunment,screen,history,location,navigator(用户信息),其他

2:dom节点的操作

children:找到子节点,只包含元素节点
firstchild:第一个子节点(包含所有类型节点)
firstElementChild:第一个元素子节点
lastchild:最后一个子节点
lastElementChild:最后一个元素子节点

省市联动

<body align="center">
		<select id="provice" onchange="change()">
			<option value="">请选择</option>
			<option value="0">四川</option>
			<option value="1">重庆</option>
			<option value="2">云南</option>
			<option value="3">贵州</option>
		</select>
		<label for="">省</label>
		<select id="city"></select>
		<label for="">市</label>
		<script>
			//οnchange="change()":下拉列表的选项发生改变,就会出发onchange事件
			let cities = [
				['成都', '德阳', '绵阳'],
				['九龙坡', '渝北', '沙坪坝'],
				['昆明', '大理', '丽江'],
				['贵阳', '六盘水', '遵义', '毕节']
			]
			function change() {
				let sel = document.getElementsByTagName('select')[0]
				let sel1 = document.getElementsByTagName('select')[1]
				sel1.innerHTML=''
				let value = sel.value
				for (let i = 0; i < cities.length; i++) {
					if (cities[value][i] != undefined) {
						let opt = document.createElement('option')
						opt.value=i
						opt.innerText = cities[value][i]
						sel1.appendChild(opt)
					}
				}
			}
		</script>
	</body>

6、事件和事件源

1.事件分为:鼠标事件,键盘事件,状态事件,其他事件

2.事件对象:event,事件发生的时候会产生一个event对象

3.事件的定义方式:直接在标签上使用on+事件名称,调用函数

4-事件的取消:事件执行的函数返回值为false,事件不执行

5.事件的执行机制:冒泡原理–元素的某个事件被触发,那么其父类包裹元素的同类事件也会被触发
6.何阻止事件冒泡：event.cancelBubble=true

7、创建对象的三种方式

<body>
		<script>
			//1.通过object创建对象
			function fun() {
				let teacher = new Object(); //自定义一个teacher对象
				teacher.name = "李老师"; //自定义对象设置属性
				teacher.age = 20;
				teacher.work = function() { //给自定义对象设置方法
					console.log(this.name + ",今年" + this.age + "岁" + ",教英语.");

				}
				teacher.eat = function(mm) {
					console.log(this.name + "喜欢吃:" + mm);
				}
				return teacher
			}
			let t1 = fun()
			console.log(t1);
			t1.name = "王老师"
			t1.age = 55
			t1.work()
			t1.eat("tea")
			//2.通过构造函数创建自定义对象
			function Teacher(name, age, course) {
				this.name = name
				this.age = age
				this.course = course
				this.work = function() {
					console.log(this.name + this.age + this.course);
				}
				this.eat = function(mm) {
					console.log(this.name + "喜欢吃:" + mm);
				}
			}
			teac = new Teacher('王老师', 35, '数学')
			teac.work()
			teac.eat('汉堡')
			//3.json格式定义对象
			//---json格式:{key:value},key为字符串,value为any(任意数据类型)
			//常用于服务器端和客户端交互数据
			let t3 = {
				name: '陈老师',
				age: 30,
				course: "语文",
				work: function() {
					console.log(this.name + this.age + this.course);
				}
			}
			t3.name="xxxxx"
			t3.work()
			
			let t4={name:"alice",scores:{"yw":80,"sx":60,'yy':55}}
			console.log(t4.name);
			console.log(t4.scores.yw);
			console.log(t4.scores.sx);
			console.log(t4.scores.yy);
			console.log(t4.scores);
		</script>
	</body>

js实现画图工具

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span {
				width: 5px;
				height: 5px;
				background-color: green;
				border-radius: 50%;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<label for="">画笔</label>
		<select name="" id="pen">
			<option value="5">细化笔</option>
			<option value="10">粗化笔</option>
		</select>
		<label for="">颜色</label>
		<select name="" id="color">
			<option value="red">红色</option>
			<option value="green">绿色</option>
		</select>
		<button onclick="end()">橡皮擦</button>
		<button onclick="start()">画笔</button>
		<hr>
		<div style="width: 1000px;height: 500px;border: 1px solid bisque;position: relative;">
			<!-- 鼠标移动在div的内部,产生一个span -->
		</div>
		<script>
			let div = document.getElementsByTagName('div')[0]

			function start() {
				div.onmousemove = function() {
					let X = event.clientX - 15
					let Y = event.clientY - 50
					let pen = document.getElementById('pen').value
					let color = document.getElementById('color').value
					if (X > 0 && Y > 0&&X<(1000-pen)&&Y<(500-pen)) {
						let span = document.createElement('span')
						div.appendChild(span)
						span.style = 'top:' + Y + 'px;left:' + X + 'px;width:' + pen + 'px; height:'+pen+'px;background:' + color + ';'
					}

				}
			}
			function end() {
				div.onmousemove = function() {
					if (event.target.nodeName == 'SPAN') {
						event.target.remove()
					}
				}
			}
		</script>
	</body>
</html>

jquery

一、jquery的概念

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

二、jquery的选择器

jquery的选择器函数:$(选择器),选择器可以支持任意css的选择器

jquery的方法:一般无参表示获取,有参表示设置

<body>
		<div id="d1">
			<p>:first(第一个)</p>
			<p>:last(最后一个)</p>
			<p>:not(不要这个)</p>
			<p>:even(偶数),:odd(奇数)</p>
			<p></p>
			<p class="impt">:odd</p>
			<p >:eq(index),等于</p>
			<p >:lt(index),小于</p>
			<p >:gt(index),大于</p>
			<p style="display: none;">看不见</p>
			<a href="a.html">#a.html</a>
			<a href="">#b.html</a>
			<a href="#">#c.html</a>
			<input type="text" disabled="disabled">女
			<input type="radio" checked="checked">男
			<input type="radio">女
		</div>
		<script>
			//1.把第一个p标签字体设置为蓝色
			$('p:first').css('color','blue')
			//2.把最后一个p背景设置为黄色
			$('p:last').css('background','yellow')
			//3.找到不是class=impt的p设置绿色边框
			$('p:not(.impt)').css('border','1px solid green')
			//4.奇数的p背景色为粉色,偶数为灰色
			$('p:odd').css('background','pink')
			$('p:even').css('background','gray')
			//5.index=2,设置为字体25px,index大于2,设置30px,index<2,20px
			$('p:eq(2)').css('font-size','25px')
			$('p:lt(2)').css('font-size','20px')
			$('p:gt(2)').css('font-size','30px')
			//6.选出包含了元素嵌套内容中含有某个字符串的
			console.log($('p:contains("index")'));
			//7.找出标签的文本内容是空的元素
			$('p:empty').text("empty选出来的")
			//8.找可见的,:visible-可见的,:hidden-隐藏的
			$('p:visible').hide()
			$('p:hidden').show()
			//9.属性选择器查找:根据属性名查找或者属性名对于属性值
			//[属性名=属性值]
			$('a[href="#"]').css('color','red')
			$('a[href!="#"]').css('color','green')
			
			console.log($('p[class]').length);
			$('input[type="text"]').css('color','red')
			//10. :enabled, :checked,:selected
			$('input:disabled').val('21321414211')
			//11.表单选择器,可以根据表单的type进行选择
			$('input:text').val('======')
			console.log($('input:radio').length);
			
		</script>
	</body>

三、jquery dom操作

<body>
		<ul class="u0">
			<li>重庆</li>
			<li>武汉</li>
			<li>长沙</li>
			<li>南昌</li>
		</ul>
	</body>
	<script>
		//1.创建节点,内容是成都,添加到武汉的前面
		//$('<li>成都</li>'),这个节点为jquery对象
		let $li = $('<li>成都</li>')
		$li.addClass('active') //参数为类名
		$li.click(function() {
			$li.hide()
		})
		//2.添加节点
		$('li:eq(1)').before($li) //在节点前添加新节点

		//3.在第一个li中添加超链接
		let $a = $('<a></a>')
		$a.text('这是最热的')
		$a.attr("href", "http://www.baidu.com")

		$('.u0 li:first').append($a) //作为子节点添加

		//4.找到u0的孩子们,然后切换孩子们的class
		let $chs = $('.u0 li')
		$chs.toggleClass('active')
		$chs.removeClass('active')
		$chs.toggleClass('active')
		//把所有的li中的内容获取出来,保存在一个数组中
		let arr=new Array()
		// for(let i=0;i<$chs.length;i++){
		// 	arr.push($chs.eq(i).text())
		// }
		
		//jquery的each函数(each遍历数组)
		$chs.each(function(){
			arr.push($(this).text())
			$(this).mouseover(function(){
				// $(this).css('font-size')
				$(this).css({'color':'green'},{'font-size':'30px'})
			})
			$(this).mouseout(function(){
				$(this).css('color','red')
			})
		})
		//5.通过最后一个li标签,删除父节点
		// $('li:last').parent().remove()
		//6:通过第二个li,找到全部
		let $sib=$('li:eq(1)').siblings()
		$sib.each(function(){
			$(this).text($(this).text()+"====="+$(this).text())
		})
		//7.找到最后一个li,找最后一个li的上一个兄弟
		console.log($('li:last').prev().text());
		
		console.log(arr);
	</script>

四、jquery练习

test1 图片轮播

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0%;
				padding: 0%;
			}

			#main {
				width: 960px;
				height: 540px;
				position: relative;
				background-size: cover;
				margin: 100px auto;
			}

			#skin {
				width: 960px;
				height: 540px;
			}

			#skin>div {
				width: 960px;
				height: 540px;
			}

			#head {
				width: 600px;
				height: 210px;
				position: absolute;
				bottom: 20px;
				left: 30px;
			}

			#head>div {
				width: 110px;
				height: 210px;
				margin-right: 8px;
				background-size: cover;
				float: left;
			}

			.show {
				box-shadow: 2px 2px 6px #fff;
				/* 	position: relative;
				left: -2px;
				top: -2px; */
				transform: translate(-2px, -2px);
			}
		</style>
		<script src="../js/jquery.js"></script>
	</head>
	<body>
		<div id="main">
			<div id="skin">
				<div style="background-image: url(../testImg/skin/Ezreal_Splash_Centered_3.jpg);"></div>
				<div style="background-image: url(../testImg/skin/Ezreal_Splash_Centered_5.jpg);"></div>
				<div style="background-image: url(../testImg/skin/Ezreal_Splash_Centered_6.jpg);"></div>
				<div style="background-image: url(../testImg/skin/Ezreal_Splash_Centered_7.jpg);"></div>
				<div style="background-image: url(../testImg/skin/Ezreal_Splash_Centered_8.jpg);"></div>
			</div>
			<div id="head">
				<div style="background-image: url(../testImg/head/Ezreal_3.jpg);"></div>
				<div style="background-image: url(../testImg/head/Ezreal_5.jpg);"></div>
				<div style="background-image: url(../testImg/head/Ezreal_6.jpg);"></div>
				<div style="background-image: url(../testImg/head/Ezreal_7.jpg);"></div>
				<div style="background-image: url(../testImg/head/Ezreal_8.jpg);"></div>
			</div>
		</div>
		<script>
			$(function() {
				$('#skin div:eq(0)').siblings().hide()
				$('#head div:eq(0)').addClass('show')
				$('#head div').bind('click', function() {
					let index=$(this).index()
					ind=index
					$(this).addClass('show').siblings().removeClass('show')
					$("#skin div:eq("+index+")").fadeIn(300).siblings().hide()
				})
				let ind=0;
				setInterval(function(){
					if(ind<4){
						ind++
					}else{
						ind=0
					}
					$('#head div:eq('+ind+')').addClass('show').siblings().removeClass('show')
					$("#skin div:eq("+ind+")").fadeIn(300).siblings().hide()
				},3000)
			})
		</script>
	</body>
</html>

test2 抽屉动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0%;
				padding: 0%;
			}

			#main {
				width: 1400px;
				height: 600px;
				position: relative;
				margin: 100px auto;
			}

			#main>.img {
				width: 60px;
				height: 600px;
				float: left;
				position: relative;
			}

			#main>.img>.text {
				width: 60px;
				height: 600px;
				position: absolute;
				right: 0;
				background-color: rgba(150, 150, 150, 0.15);
			}

			#main>.img>.text>p:first-child {
				width: 20px;
				font-size: 20px;
				height: 100px;
				color: white;
				margin: 40px auto;
			}

			#main>.img>.text>p:last-child {
				width: 20px;
				font-size: 20px;
				height: 100px;
				font-weight: lighter;
				color: white;
				margin: 40px auto;
			}
		</style>
		<script src="../js/jquery.js"></script>
	</head>
	<body>
		<div id="main">
			<div class="img"
				style="width: 1000px; background-image: url(../testImg/skin/Ezreal_Splash_Centered_3.jpg);">
				<div class="text">
					<p>冰川勇者</p>
					<p>伊泽瑞尔</p>
				</div>
			</div>
			<div class="img" style="background-image: url(../testImg/skin/Ezreal_Splash_Centered_5.jpg);">
				<div class="text">
					<p>未来战士</p>
					<p>伊泽瑞尔</p>
				</div>
			</div>
			<div class="img" style="background-image: url(../testImg/skin/Ezreal_Splash_Centered_6.jpg);">
				<div class="text">
					<p>暗杀星</p>
					<p>伊泽瑞尔</p>
				</div>
			</div>
			<div class="img" style="background-image: url(../testImg/skin/Ezreal_Splash_Centered_7.jpg);">
				<div class="text">
					<p>光执事</p>
					<p>伊泽瑞尔</p>
				</div>
			</div>
			<div class="img" style="background-image: url(../testImg/skin/Ezreal_Splash_Centered_8.jpg);">
				<div class="text">
					<p>黑桃皇牌</p>
					<p>伊泽瑞尔</p>
				</div>
			</div>
		</div>
		<script>
			$(function() {
				$(".img").mouseenter(function() {
					$(this).stop().animate({
						width: '1000px'
					}).siblings().stop().animate({
						width: '60px'
					})
				})
			})
		</script>
	</body>
</html>

test3 打地鼠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#main {
				margin: 100px auto 0;
				width: 720px;
				height: 360px;
				border: 4px double black;
			}

			#main>div {
				width: 100px;
				height: 100px;
				background-color: rgba(10, 10, 10, 0.3);
				float: left;
				margin: 10px;
			}

			button {
				width: 100px;
				height: 50px;
				margin: 20px 700px;
				font-size: 20px;
				cursor: pointer;
			}

			.show {
				background-size: cover;
				background-image: url(../testImg/Darius_Splash_Tile_4.jpg);
			}
		</style>
		<script src="../js/jquery.js"></script>
	</head>
	<body>
		<div id="main">
		</div>
		<button>开始游戏</button>
	</body>
	<script>
		for (let i = 0; i < 18; i++) {
			$('#main').append($('<div></div>'))
		}
		$(function() {
			let timer
			let score=0
			let $divs = $('#main div')
			$('button').click(function() {
				score=0
				clearInterval(timer)
				setTimeout(function() {
					clearInterval(timer)
					alert("游戏结束,得分:" + score)
				}, 8800);
				timer = setInterval(toImg, 600)
			})
			function toImg() {
				$divs.removeClass('show')
				let index = Math.floor(Math.random() * $divs.length)
				$("#main div:eq(" + index + ")").addClass('show')
			}
			$('#main div').click(function() {
				if ($(this).hasClass('show')) {
					score++
					$(this).removeClass('show')
				}
			})
		})

		
	</script>
</html>

dth: 100px;
height: 50px;
margin: 20px 700px;
font-size: 20px;
cursor: pointer;
}

		.show {
			background-size: cover;
			background-image: url(../testImg/Darius_Splash_Tile_4.jpg);
		}
	</style>
	<script src="../js/jquery.js"></script>
</head>
<body>
	<div id="main">
	</div>
	<button>开始游戏</button>
</body>
<script>
	for (let i = 0; i < 18; i++) {
		$('#main').append($('<div></div>'))
	}
	$(function() {
		let timer
		let score=0
		let $divs = $('#main div')
		$('button').click(function() {
			score=0
			clearInterval(timer)
			setTimeout(function() {
				clearInterval(timer)
				alert("游戏结束,得分:" + score)
			}, 8800);
			timer = setInterval(toImg, 600)
		})
		function toImg() {
			$divs.removeClass('show')
			let index = Math.floor(Math.random() * $divs.length)
			$("#main div:eq(" + index + ")").addClass('show')
		}
		$('#main div').click(function() {
			if ($(this).hasClass('show')) {
				score++
				$(this).removeClass('show')
			}
		})
	})

	
</script>


[jQuery文档](https://jquery.cuishifeng.cn/)

想躺平的咸鱼

关注

4
点赞
踩
66

收藏

觉得还不错? 一键收藏
1
评论
HTML+CSS+JS总结

HTML是超文本标记语言是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。二.HTML标签标签的概念一个html文件是由标签和元素组成的html的标签还有很多包括input,from等等html标签对照表CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。1:继承性:父元素的样
复制链接

扫一扫