task_2_18.html

﻿<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>IFE JavaScript Task 01</title>
    
        <style>
            #container li{
                display: inline-block;
                font-size: 30px;
                text-align: center;
                padding: 0 15px;
                margin: 2px 0;
                margin-right: 10px;
                height: 50px;
                line-height: 50px;                
                background-color: red;
                color: #FFFFFF;
            }
        </style>
    </head>
    
    <body>
        <input type="text" id="input" />
        <input type="button" value="左侧入" id="left-in" />
        <input type="button" value="右侧入" style="margin-right: 25px" id="right-in" />
        <input type="button" value="左侧出" id="left-out" />
        <input type="button" value="右侧出" id="right-out" />
        
        <div id="container">
          
        </div>
		<script>
		window.onload=function(){
	var oLi=document.getElementsByTagName('li');
	var contaniner=document.getElementById('container');
	document.getElementById('right-in').onclick=function(){
		var pl=document.createElement('li');
		if(!isNaN(document.getElementById('input').value)){
			pl.innerHTML=document.getElementById('input').value;
			container.appendChild(pl);
		}
		else{
			alert("输入不合法，请重新输入");
		}
	};

    document.getElementById('left-in').onclick=function(){
		var pl=document.createElement('li');
        if(!isNaN(document.getElementById('input').value)){
			pl.innerHTML=document.getElementById('input').value;
			container.insertBefore(pl,oLi[0]);
		}
		else{
			alert("输入不合法，请重新输入");
		}
	};
	
	document.getElementById('left-out').onclick=function(){
		alert(oLi[0].innerHTML);
		container.removeChild(oLi[0]);
	};
	
	document.getElementById('right-out').onclick=function(){
		alert(oLi[oLi.length-1].innerHTML);
		container.removeChild(oLi[oLi.length-1]);
	};
	
	document.getElementById('right-out').onclick=function(){
		alert(oLi[oLi.length-1].innerHTML);
		container.removeChild(oLi[oLi.length-1]);
	};
	container.onmouseover=function(){
	for(var i=0;i<oLi.length;i++){
		oLi[i].index=i;
		oLi[i].onclick=function(){
			container.removeChild(container.childNodes[this.index]);

		}
	}
	}
}
		</script>
    </body>
</html>        