JS学习第二周总结

最新推荐文章于 2021-03-14 20:35:41 发布

恋风（微信）

最新推荐文章于 2021-03-14 20:35:41 发布

阅读量352

点赞数

分类专栏： JS学习笔记 JS学习笔记

本文链接：https://blog.csdn.net/weixin_44791254/article/details/88907275

版权

JS学习笔记同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

JS学习笔记

22 篇文章 0 订阅

订阅专栏

1.上周内容回顾

多个script标签，一个报错，另一个还是会继续执行。
多个window.onload入口函数，后面的会覆盖前面的，最终只会执行一个。
函数：可以重复使用的代码块的封装。
函数三种创建方式：函数声明式、函数表达式、Function——构造函数。
变量声明提升：JS执行前会预解析，将变量声明提升到最前面。

2.函数参数

注意点一：

function fun(a,b,c){
	console.log(a+b+c);
}
fun();// 返回NaN

注意点二：
- 形参实参不统一，会按照顺序为参数赋值，多了少了都是这样。
- undefined执行任何操作返回NaN
注意点三：arguments
- console.log(fun.length);// 获取到的是形参的个数
- console.log(arguments);// 获取到实参数组
- console.log(arguments[0]);// 第一个实参
- console.log(arguments.length);// 实参的个数
- 实现形参实参统一的判断代码：fun.length=arguments.length。

3.return

return后面的代码不会执行；
后面的代码不能换行。
可以使用return返回需要值，来封装函数。

4.表单常用事件

onfocus（获得焦点）
onblur（失去焦点）
focus()自动获取焦点
value 获取表单输入的内容
select() 表单选择内容
checked=true 选中
oninput 输入内容时(IE6、7、8兼容的是onpropertychange。)

5.获得元素的方式

通过Id获取元素，document.getElementById();
通过标签名获取元素，documnet.getElementsByTagName()，获取到的是一个伪数组；
通过类名获取元素，document.getElementsByClassName(),获取到的也是一个伪数组；
对于获取到伪数组的情况，一般处理方式如下：
- 通过for循环遍历所有元素
- 通过父级元素缩小范围之后再获取里面的元素

6.数组

创建数组：
- var arr=[1,2,3,4,5…];
- var arr2=new Array(1,2,3,4,5…)// 使用不多
通过下标（索引）来获取数组中元素，没有的元素返回undefined
遍历数组元素，for循环
数组常用的几个方法
- pop：删除并返回最后一个元素；
- push：向数组末尾添加一个或多个元素，并返回新数组长度；
- shift：删除并返回数组第一个元素；
- unshift：向数组开头添加元素，并返回新数组长度；
- concat：连接多个数组并返回结果；
- reverse：颠倒数组顺序；
- sort：对数组元素进行排序；证明是没用的！！！
- toString：把数组转成字符串，并返回结果；
- join：把数组所有元素放入一个字符串，并用指定符号分割；
- slice：从已有的数组返回选定的元素，可以传负值；
- splice：删除元素并添加新元素，改变的元素比slice多一个，基本涵盖slice功能，记这个就够了；
- split(‘字符串中符号’)符号必须统一用指定符号分隔，把字符串转成数组

7.运算符

一元运算符
- typeof
- ++、–
- +a、-a和数学上的正负相同
二元运算符
- +、-、*、/、%
- 与或非
三元（三目）运算
- 表达式？结果1：结果2；
- 全选、反选代码优化，同样的重复内容，要想到使用函数重复调用来简化。
- 事件调用函数，如果不使用匿名函数的话，调用函数会直接执行，所以必须用匿名函数包裹调用函数内容。

8.循环

for循环，从1到100求和；
while循环，while(条件){代码块}；
do{代码块}while(条件)；

while(i<=100){
	sum+=i;
	i++;
}
do{
	sum+=i;
	i++
}while(i<=100)

9.switch语句

switch(条件){case value:语句；break；…default 语句；break;}

10.DOM

JS组成部分：

ECMAScript
DOM——Document Object Model 文档对象模型
BOM

DOM：

DOM树
节点：（元素、标签）
- 标签节点
- 属性节点
- 文本节点
访问节点
- 访问标签节点：getElementsByTagName
- id属性：getElementById
- class属性：getElementsByClassName（IE6、7、8不支持这个写法）
  - 例如IE6、7基本上没有人在用了，但是IE8使用人数还不少
  - IE9及以后的版本是兼容的
  - 写一个兼容的函数，直接调用来处理兼容问题

11.节点关系

父节点parentNode，这个操作可以连续使用，如span.parentNode.parentNode
兄弟节点nextElementSibling、previousElementSibling；注意nextSibling、previousSibling是IE6、7、8专用获取方式。
子节点firstElementChild、lastElementChild；注意firstChild、lastChild是IE6、7、8专用获取方式。
- childNodes，他是一个W3C指定推荐的，包含换行在内
- nodeType==1，表示这是元素节点
- children能拿到子元素，且没有多余内容，这是一个非标准，但是好用，且没有兼容问题。

12.节点操作

创建元素 document.creatElement(标签字符串);
- 插入元素 .appendChild(创建元素);
- 创建的是子元素，插入到父元素的最后面
- 另一种插入元素 insertBefore(新创建元素，参考元素);如果参考元素传null，就和appendChild一样了。
删除元素 .removeChild(要删除的元素);
克隆一个元素 cloneNode(); true深克隆

13.属性操作

获得属性 getAttribute()；
删除属性 removeAttribute；
修改属性 setAttribute；

14.小总结

如果要改变的元素样式是写在style标签中的，一般是.style再加上属性名来修改样式；不是写在style标签中的属性，例如src是不用再写.style的，而是直接写.src。
innerHTML，修改元素内容
this关键字，指的是事件的调用者
通过className改变样式
字符串拼接，变量要单独提出来，用+号拼接，空格坚决不能少。
排它思想，首先把所有都干掉，再给自己添加
自定义属性.index拿到当前元素下标
||使用或符号来写兼容注意点：需要先写高级浏览器
事件可以连写，..onpropertychange=function(){}
常用事件回顾：
- onchange
- oninput（onpropertychange）
- onfocus
- onblur
- onmouseover
- onmouseout
- onclick
- ondblick
- onload

本周案例总结

1.页面上有三个按钮，每个按钮点击后会出现一个对应的盒子。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background-color:skyblue;
				text-align: center;
				vertical-align: middle;
				display: none;
				margin-top:30px;
			}
			button{
				width:50px;
				height:50px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<button id="btn1">1</button>
		<button id="btn2">2</button>
		<button id="btn3">3</button>
		<div id="one">1</div>
		<div id="two">2</div>
		<div id="three">3</div>			
		<script type="text/javascript">			
			function myFunction(boxId,btnId){
				var boxId=document.getElementById(boxId);
				var btnId=document.getElementById(btnId);
				btnId.function(){
					boxId.style.display="block";
				}
				
			}
			myFunction("one","btn1");
			myFunction("two","btn2");
			myFunction("three","btn3");
		</script>
	</body>
</html>

2.隔行变色案例，鼠标经过高亮显示

注意：行内样式权重高于类名设置的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style: none;
			}
			li{
				line-height:40px;
				margin-top:10px;
				border:1px solid #777;
				padding-left:20px;
				width:300px;
				height:40px;
			}
			.bgc{
				background-color:skyblue!important;				
			}
		</style>
	</head>
	<body>
		<ul>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
			<li>我是段落内容，请仔细阅读。</li>
		</ul>
		<script type="text/javascript">
			var lis=document.getElementsByTagName("li");
			for(var i=0;i<lis.length;i++){
				if(i%2==0){
					lis[i].style.backgroundColor="yellow";					
				}
				lis[i].function(){
					this.className="bgc";
				}
				lis[i].function(){
					this.className="";
				}
			}
		</script>
	</body>
</html>

3.精灵图实现九宫格布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			ul{
				list-style: none;
				width:410px;
				height:310px;
				margin:100px auto;				
				border:1px solid #666;
				padding-left:20px;
			}
			li{
				display: block;
				width:100px;
				height:100px;
				float:left;
				text-align: center;
				margin-bottom: 10px;
			}
			i{
				display:block;
				width:44px;
				height:44px;
				background:url(img/QQ图片20190326144407.png) no-repeat;
				margin-top:10px;
				margin-left:40px;
			}
			a{
				text-decoration: none;
				color:#999;
				font-size:18px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
			<li>
				<i></i>
				<a href="">充话费</a>
			</li>
		</ul>
		<script type="text/javascript">
			var is=document.getElementsByTagName("i");
			for(var i=0;i<is.length;i++){
				is[i].style.backgroundPosition="0px "+(-43*i)+"px";// 空格不能少
//				is[i].style.backgroundPositionY=(-43*i)+"px";// 只有Y方向变量改变
			}
		</script>
	</body>
</html>

4.京东搜索框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
				position: relative;
			}
			#container{
				width: 500px;
				margin:100px auto;
			}
			#txt{
				height:30px;
				width:500px;
			}
			#label{
				position: absolute;
				top:5px;;
				left:10px;
				cursor: text;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<input type="text" id="txt"/>
			<label id="label" for="txt">默认商品</label>
		</div>
		<script type="text/javascript">
			var txt=document.getElementById("txt");
			var label=document.getElementById("label");
			txt.function(){
				label.style.color="#666";
			}
			txt.function(){
				label.style.color="black";				
			}
			txt.function(){
				label.style.display="none";	
				if(txt.value==""){
					label.style.display="block";
				}
			}
		</script>		
	</body>
</html>

5.排它思想，让盒子点击单独高亮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				float:left;
				border:1px solid red;
				margin:100px 20px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>		
		<script type="text/javascript">
			var divs=document.getElementsByTagName("div");
			for(var i=0;i<divs.length;i++){
				divs[i].function(){
					for(var j=0;j<divs.length;j++){
						divs[j].style.backgroundColor="";
					}
					this.style.backgroundColor="blue";
				}
			}			
		</script>		
	</body>
</html>

6.tab栏效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#container{
				width:382px;
				height:440px;
				border:1px solid #666;
				margin:100px auto;
			}
			#big{
				margin:auto;
				width:360px;
				height:360px;
			}
			#small li{
				display: inline-block;
				list-style: none;
				border:1px solid #666;
			}			
			#big img{
				display: none;
			}
			#small .light{
				border:2px red solid;
			}
			#big .show{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="container">			
			<div id="small">
				<ul>
					<li class="light"><img src="img/01.jpg"/></li>
					<li><img src="img/02.jpg"/></li>
					<li><img src="img/03.jpg"/></li>
					<li><img src="img/04.jpg"/></li>
					<li><img src="img/05.jpg"/></li>
				</ul>
			</div>
			<div id="big">
				<img src="img/01big.jpg" class="show"/>
				<img src="img/02big.jpg"/>
				<img src="img/03big.jpg"/>
				<img src="img/04big.jpg"/>
				<img src="img/05big.jpg"/>
			</div>
		</div>
		<script type="text/javascript">
			var lis=document.getElementsByTagName("li");
			var big=document.getElementById("big");
			var imgs=big.getElementsByTagName("img");
			for(var i=0;i<lis.length;i++){
				lis[i].index=i;
				lis[i].function(){
					for(var j=0;j<lis.length;j++){
						lis[j].className="";
						imgs[j].className="";
					}
					this.className="light";
					imgs[this.index].className="show";
				}
			}
		</script>
	</body>
</html>

7.用户输入一个英雄名字，得到对应的外号。

switch(val){
	case "宋江":
		alert("及时雨——"+val);
		break;
	case "林冲":
		alert("豹子头——"+val);
		break;
	case "杨志":
		alert("青面兽——"+val);
		break;
	case "花荣":
		alert("小李广——"+val);
		break;
	default:
		alert("查无此人，请自行百度");
		reak;					
}

8.下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				background-image: url(img/QQ图片20190327143644.jpg);
			}			
			select {
				width: 100px;
				height: 50px;
				font-size: 24px;
				padding-left: 20px;
			}
		</style>
	</head>
	<body>
		<select id="sec">
			<option value="1">春</option>
			<option value="2">夏</option>
			<option value="3">秋</option>
			<option value="4">冬</option>
		</select>
		<script type="text/javascript">
			var sec = document.getElementById("sec");
			sec.onchange = function() {
				var val = sec.value;
				switch(val) {
					case "1":
						document.body.style.backgroundImage = "url(img/QQ图片20190327143644.jpg)";
						break;
					case "2":
						document.body.style.backgroundImage = "url(img/QQ图片20190327143652.jpg)";
						break;
					case "3":
						document.body.style.backgroundImage = "url(img/QQ图片20190327143706.jpg)";
						break;
					case "4":
						document.body.style.backgroundImage = "url(img/QQ图片20190327143659.jpg)";
						break;
				}
			}
		</script>
	</body>
</html>

9.选择排序和冒泡排序

选择排序和冒泡排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr=[1,3,3,2,5,4];
			var arr1=arr;
			maopao(arr);
			console.log(arr);
			xuanze(arr1);
			console.log(arr1);			
			function maopao(arr){
				var sum=0;
				for(var i=0;i<arr.length-1;i++){
					for(var j=0;j<arr.length-1-i;j++){
						var t;
						if(arr[j]<arr[j+1]){
							t=arr[j];
							arr[j]=arr[j+1];
							arr[j+1]=t
						}
						sum++
					}
				}
				console.log(sum);
			}
			function xuanze(arr){
				var sum=0;
				for(var i=0;i<arr.length-1;i++){
					var k=i
					for(var j=i+1;j<arr.length;j++){
						if(arr[k]<arr[j]){
							k=j;
						}
						sum++;
					}
					if(i!=k){
						var t;
						t=arr[i];
						arr[i]=arr[k];
						arr[k]=t
					}
				}
				console.log(sum);
			}
		</script>
	</body>
</html>

10.今日运势

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0px;
				padding:0px;
				font-size:18px;
			}
			#container{
				width:530px;
				height:440px;
				margin:50px auto;
				border:1px solid black;	
				padding:20px;	
			}
			h2{
				color:#666;
				font-size:24px;
				margin-bottom: 20px;
			}
			#centerLeft{
				width:50px;
				height:50px;
				background:url(img/星座精灵图.png) no-repeat;
				float:left;
				margin:0px 50px;
			}
			select{
				padding-left:10px;
				width:200px;
				height:30px;
				font-size:18px;
				display: block;
				margin-bottom: 10px;
			}
			#yunshi{
				display: block;
				float:left;
			}
			#star{
				width:80px;
				height:13px;
				float:left;
				position: relative;
			}
			#lightstar{
				display:block;
				width:80px;
				height:13px;
				float:left;
				background:url(img/星星图.png) left bottom no-repeat;
				position: absolute;
				top:5px;
				left:0;
			}
			#blackstar{
				display:block;
				width:80px;
				height:13px;
				float:left;
				background:url(img/星星图.png) left top no-repeat;
				margin-top:5px;
			}			
			#clear{
				clear:both;
			}
			p{
				margin-top:20px;
				text-indent:2em;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="tops">
				<h2>星座运势</h2>
			</div>
			<div id="centers">
				<div id="centerLeft"></div>
				<div id="centerRight">
					<select id="sec">
						<option value="0">白羊座03.21-04.19</option>
						<option value="1">金牛座04.20-05.20</option>
						<option value="2">双子座05.21-06.21</option>
						<option value="3">巨蟹座06.22-07.22</option>
						<option value="4">狮子座07.23-08.22</option>
						<option value="5">处女座08.23-09.22</option>
						<option value="6">天秤座09.23-10.23</option>
						<option value="7">天蝎座10.24-11.22</option>
						<option value="8">射手座 11.23-12.21</option>
						<option value="9">摩羯座12.22-01.19</option>
						<option value="10">水瓶座01.20-02.18</option>
						<option value="11">双鱼座02.19-03.20</option>
					</select>
					<span id="yunshi">今日运势：</span>
					<div id="star">
						<span id="lightstar"></span>
						<span id="blackstar"></span>
					</div>
					<div id="clear">						
					</div>
				</div>
			</div>
			<div id="bottoms">
				<p id="content">今天的事业运势不错，虽然容易有一些竞争者或其他小人出现在事业中，但他们反而会成就自己的事业。今天仍然适合外出学习进修，提升自己。</p>
			</div>
		</div>
		<script type="text/javascript">
			function $id(id){
				return document.getElementById(id);
			}
			function change(val,num,str){
				centerLeft.style.backgroundPositionY=(-val*50)+"px";
				lightstar.style.width=(num*8)+"px";
				content.innerHTML=str;
			}
			var sec=$id("sec");
			var centerLeft=$id("centerLeft");
			var lightstar=$id("lightstar");
			var content=$id("content");
			var arr=[10,9,6,8,6,8,5,2,1,3,6,1];
			var str=["今天的事业运势不错，虽然容易有一些竞争者或其他小人出现在事业中，但他们反而会成就自己的事业。今天仍然适合外出学习进修，提升自己。","外出容易遇到一些小麻烦，但终能化解，转不利为有利。","会专注于事业方面，虽然在事业工作方面，会有些迷茫，这天感情方面运势也不错。","这天巨蟹会很忙碌，但会忙得非常愉快，即使平时不太爱运动的巨蟹，这天也可能很强活动一下自己。","快乐的一天，也有迁移运势，工作和健康方面的运势也都还不错。","这天适合多听取一些朋友，对自己家庭，或者房子装修布置的建议。","有利于学习考试，与上司的沟通也会比较良好，总体比较愉快。","财运很好的一天，讲话比较严谨大气，也适合多一些娱乐活动。","不错的一天，财运仍然较好，会因为平时不太熟悉的一些晚辈帮助，或者因为娱乐活动而获利。","有朋友来帮助自己，让自己信心满满，心理层面，也是比较愉悦。","暗中会得人帮助，也容易得到亲戚，邻居的一些帮助，这天财运上也还可以。","社交运仍然强旺，内心也变得强大起来，也会因为事业方面的事情，心情愉快。"];
			sec.function(){
				var val=this.value;
				change(val,arr[val],str[val]);
			}
		</script>
	</body>
</html>

11.商品展

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#container{
				width:360px;
				height:435px;
				border:1px solid #666;
				margin:100px auto;
			}
			#big{
				width:360px;
				height:360px;
				background:url(img/01big.jpg) no-repeat;
			}
			#small li{
				list-style: none;
				float:left;
				border:1px solid #666;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="big"></div>
			<div id="small">
				<ul>
					<li><img src="img/01.jpg"/></li>
					<li><img src="img/02.jpg"/></li>
					<li><img src="img/03.jpg"/></li>
					<li><img src="img/04.jpg"/></li>
					<li><img src="img/05.jpg"/></li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			var lis=document.getElementsByTagName("li");
			var big=document.getElementById("big");
			function show(index){
				lis[index].function(){
					console.log(11);
					big.style.backgroundImage="url(img/0"+(index+1)+"big.jpg)";
				}
			}
			for(var i=0;i<lis.length;i++){
				show(i);
			}
		</script>
	</body>
</html>

12.带id名的getClass函数封装

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
				width:100px;
				height:40px;
				display: inline-block;
				float:left;
				margin:20px;
				background-color:hotpink;
			}
		</style>
	</head>
	<body>
		<div id="topbox">
			<ul>
				<li>上1</li>
				<li class="box">上2</li>
				<li>上3</li>
				<li class="box">上4</li>
				<li>上5</li>
				<li class="box">上6</li>
				<li>上7</li>
			</ul>
		</div>
		<div id="bottombox">
			<ul>
				<li>下1</li>
				<li>下2</li>
				<li>下3</li>
				<li>下4</li>
			</ul>
		</div>
		<script type="text/javascript">
			function getClass(classname,id){
				if(document.getElementsByClassName){
					if(id){
						var id=document.getElementById(id);
						return id.getElementsByClassName(classname);
					}else{
						return document.getElementsByClassName(classname);
					}
				}
				var arr=[];
				if(id){
					var id=document.getElementById(id);
					var dom=id.getElementsByTagName("*");
				}else{
					var dom=document.getElementsByTagName("*");
				}
				for(var i=0;i<dom.length;i++){
					var newArr=dom[i].className.split(" ");
					for(var j=0;j<newArr.length;j++){
						if(newArr[j]==classname){
							arr.push(dom[i]);
						}
					}
				}
				return arr;
			}
			var boxs=getClass("box","topbox");
			for(var i=0;i<boxs.length;i++){
				boxs[i].style.backgroundColor="skyblue";
			}
		</script>
	</body>
</html>

13.通过父节点关闭广告框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				width:100%;
				height:100px;
				background-color:yellow;
				position: relative;
			}
			span{
				display: block;
				width:50px;
				height:50px;
				background-color:red;
				border-radius: 10px;
				position: absolute;
				top:0;
				right:0;
				text-align: center;
				line-height: 50px;
				font-size:30px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<span>X</span>
	</body>
	<script type="text/javascript">
		var span=document.getElementsByTagName("span")[0];
		span.function(){
			this.parentNode.style.display="none";
		}
	</script>
</html>

14.简单的评论框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#container{
				width:500px;
				margin:50px auto;
				border:1px solid #333;
				padding-bottom:20px;
			}
			input{
				width:400px;
				height:30px;
				font-size:20px;				
			}
			button{
				width:90px;
				height:30px;
				font-size:20px;	
			}
			li{
				list-style:none;
				font-size:16px;
				height:30px;
				line-height: 30px;
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<input type="text" value="请输入你的评论内容" />
			<button>发表评论</button>
			<ul>
				<li>第一个评论第一个评论第一个评论第一个评论</li>
				<li>第二个评论第二个评论第二个评论第二个评论</li>
				<li>第三个评论第三个评论第三个评论第三个评论</li>
			</ul>
		</div>
		<script type="text/javascript">
			var input1=document.getElementsByTagName("input")[0];
			var txt;
			input1.function(){
				if(input1.value=="请输入你的评论内容"){
					input1.value="";
				}				
			}
			input1.function(){
				if(input1.value==""){
					input1.value="请输入你的评论内容";
				}
				if(input1.value!=""&&input1.value!="请输入你的评论内容"){
					txt=input1.value;
				}
			}
			
			var ul=document.getElementsByTagName("ul")[0];			
			var btn=document.getElementsByTagName("button")[0];
			btn.function(){	
				var cLi=document.createElement("li");
				cLi.innerHTML=txt;
				ul.appendChild(cLi);
			}
		</script>
	</body>
</html>

15.轮播图基础版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#container{
				width:590px;
				height:470px;
				margin:100px auto;
				position: relative;
			}
			#box{
				width:590px;
				height:470px;
				overflow: hidden;
			}
			ul{				
				height:50px;
				list-style: none;
				position: absolute;			
				bottom:20px;
				left:50%;
				margin-left:-25%;
			}
			ul li{
				float:left;
				width:50px;
				height:50px;
				border-radius: 25px;
				background-color:hotpink;
				margin-left:5px;
				margin-right:5px;
				line-height: 50px;
				text-align: center;
				font-size:28px;	
				font-weight: 700;				
			}
			ul li:nth-child(1){
				background-color:red;
			}
			button{
				font-size:16px;
				padding:5px;
				background-color:greenyellow;
				position: absolute;
				top:50%;
				margin-top:-5%;	
			}
			#right{
				right:0;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="box">
				<img src="img/1.jpg"/>
				<img src="img/2.jpg"/>
				<img src="img/3.jpg"/>
				<img src="img/4.jpg"/>
				<img src="img/5.jpg"/>
			</div>
			<ul id="uu"></ul>
			<button id="left">上一张</button>
			<button id="right">下一张</button>
		</div>
		<script type="text/javascript">
			function $id(id){
				return document.getElementById(id);
			}
			var uu=$id("uu");
			var imgs=$id("box").getElementsByTagName("img");
			for(var i=0;i<imgs.length;i++){
				var cSpan=document.createElement("span");
				cSpan.innerHTML=i+1;
				var cLi=document.createElement("li");
				cLi.appendChild(cSpan);
				uu.appendChild(cLi);				
			}
			var lis=uu.getElementsByTagName("li");
			for(var i=0;i<lis.length;i++){
				lis[i].index=i;
				lis[i].function(){
					for(var j=0;j<lis.length;j++){
						imgs[j].style.display="none";
						lis[j].style.backgroundColor="hotpink";
					}
					this.style.backgroundColor="red";
					imgs[this.index].style.display="block";
				}
			}
			var left=$id("left");
			var right=$id("right");
			//未完待续		
		</script>
	</body>
</html>

恋风（微信）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习第二周总结

1.上周内容回顾多个script标签，一个报错，另一个还是会继续执行。多个window.onload入口函数，后面的会覆盖前面的，最终只会执行一个。函数：可以重复使用的代码块的封装。函数三种创建方式：函数声明式、函数表达式、Function——构造函数。变量声明提升：JS执行前会预解析，将变量声明提升到最前面。2.函数参数注意点一：function fun(a,b,c){...
复制链接

扫一扫

专栏目录