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/)
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐