JS应用案例：轮播图，评论，表格隔行变色

评论案例：

	
		
		
		
				
			textarea{
				width: 400px;
				height: 100px;
			}
			button {
				position: relative;
				left: 340px;
				top: 5px;
				border: 1px solid black;
				border-radius: 80px;
			}
			li{
				width: 370px;
				text-decoration: none;
				border: 1px solid #ccc;
				border-radius: 30px;
			}
		
	
	
		请输入你的评论
		
		发表评论
		
		


		
	
	
	
        var text = document.getElementById("text");
        var btn = document.getElementById("btn");
        var utx = document.getElementById("utx");

        btn.onclick = function(){
            var creatLiEle=document.createElement('li');
			utx.insertBefore(creatLiEle,utx.firstElementChild);
            creatLiEle.innerHTML = text.value + "删除"
            text.value = ''

            var del = document.querySelectorAll('a')
            for (var i = 0; i < del.length; i++) {
                del[i].onclick = function () {
                    utx.removeChild(this.parentNode);
                }
            }
        }

        
		
	

轮播图案例（只实现图片转换）： 

	
		
		
		
			div {
				width: 590px;
				height: 470px;
				background-color: #ccc;
				margin: 50px auto;
				position: relative;

			}

			img {
				width: 590px;
				height: 470px;

			}

			a {
				display: block;
				width: 25px;
				height: 34px;
				text-align: center;
				line-height: 34px;
				text-decoration: none;
				color: #fff;
				background-color: burlywood;
			}

			a:nth-of-type(1) {
				position: absolute;
				top: 218px;
				border-radius: 0 50% 50% 0;
			}

			a:nth-of-type(2) {
				position: absolute;
				top: 218px;
				right: 0;
				border-radius: 50% 0 0 50%;
			}

			ul li {
				list-style: none;
				display: inline-block;
				background-color: #fff;
				width: 9.97px;
				height: 9.97px;
				border: 1px solid #fff;
				border-radius: 50%;

				/* text-align: center;
				line-height: 25px; */
			}

			ul {
				position: absolute;
				bottom: 5px;
				left: 150px;
			}
		
	
	
		

			
			
			<
			>
			

				

				

				

				

				

			
		
		
			var number = 1;

			function run() {
				number++;
				if (number > 3) {
					number = 1;
				}
				var img = document.querySelector("img");
				img.src = "img/car" + number + ".jpg";
			}
			setInterval(run, 3000);
		
	

 

 

 

 

表格隔行变色案例：

	
		
		
	
	
		
			
				1-1
				1-1
				1-1
				1-1
				1-1
			
			
				1-1
				1-1
				1-1
				1-1
				1-1
			
			
				1-1
				1-1
				1-1
				1-1
				1-1
			
			
				1-1
				1-1
				1-1
				1-1
				1-1
			
			
				1-1
				1-1
				1-1
				1-1
				1-1
			
			
				1-1
				1-1
				1-1
				1-1
				1-1
			
			
				1-1
				1-1
				1-1
				1-1
				1-1
			
			
				1-1
				1-1
				1-1
				1-1
				1-1
			
			
				1-1
				1-1
				1-1
				1-1
				1-1
			
			
				1-1
				1-1
				1-1
				1-1
				1-1
			
		
		
		
			//获取所有的tr标签
			var trEles = document.querySelectorAll('tr');
			//从trEles集合中取出元素，下标为偶数的元素表示的是奇数行，下标为奇数的元素表示的是偶数行
			for(var i =0;i