JS原生学习-初级-练习01

开始学习JS原生开发，开始记录，鼓励自己每天学习一丢丢！

	
   
   
	
   
   
	
   
   
	
	 rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript" src="js/index.js"></script>


	
   
   

		
    
    点击设置样式
		
    
    

     
     小盒子
    
    
	
   
   
	
   
   
	
   
   

	
   
   

		
    
    
选择背景颜色
		
    
    
红
黄
蓝
		
    
    
选择宽度
		
    
    
100
200
300
		
    
    
选择高度
		
    
    
100
200
300
		
    
    

			
     
     恢复
			
     
     确定
		
    
    
	
   
   

window.onload = function(){
	// 获取元素
	var oBtn_set = document.getElementById('set_style_btn');
	var oBg = document.getElementById('bg');
	var oBox = document.getElementById('box');
	var oBox2 = document.getElementById('set_style');

	var red = document.getElementById('red');
	var yellow = document.getElementById('yellow');
	var blue = document.getElementById('blue');

	var w100 = document.getElementById('w100');
	var w200 = document.getElementById('w200');
	var w300 = document.getElementById('w300');

	var h100 = document.getElementById('h100');
	var h200 = document.getElementById('h200');
	var h300 = document.getElementById('h300');

	var reset_btn = document.getElementById('reset_btn');
	var confirm_btn = document.getElementById('confirm_btn');
	// 显示/隐藏设置样式选项框
	oBtn_set.onclick = show;
	//oBg.onclick = hide;
	confirm_btn.onclick = hide;
	function show(){
		oBg.style.display = 'block';
		oBox2.style.display = 'block';
	};
	function hide(){
		oBg.style.display = 'none';
		oBox2.style.display = 'none';
	};
	// 设置颜色
	red.onclick = function(){
		oBox.style.backgroundColor = "red";
		oBox.style.color = '#fff';
	};
	yellow.onclick = function(){
		oBox.style.backgroundColor = "yellow";
		oBox.style.color = '#000';
	};
	blue.onclick = function(){
		oBox.style.backgroundColor = "blue";
		oBox.style.color = '#fff';
	};
	// 设置宽度
	w100.onclick = function(){
		oBox.style.width = "100px";
	};
	w200.onclick = function(){
		oBox.style.width = "200px";
	};
	w300.onclick = function(){
		oBox.style.width = "300px";
	};
	// 设置高度
	h100.onclick = function(){
		oBox.style.height = "100px";
		oBox.style.lineHeight = "100px";
	};
	h200.onclick = function(){
		oBox.style.height = "200px";
		oBox.style.lineHeight = "200px";
	};
	h300.onclick = function(){
		oBox.style.height = "300px";
		oBox.style.lineHeight = "300px";
	};
	// 重置
	reset_btn.onclick = function(){
		oBox.style.backgroundColor = "blue";
		oBox.style.color = "#fff";
		oBox.style.width = "80px";
		oBox.style.height = "80px";
		oBox.style.lineHeight = "80px";
		hide();
	};
}/*
*标题：课后练习页面样式
*时间：2017-05-15
*作者：wuwq
*/
/*重置样式*/
*{margin: 0;padding: 0;}
a{text-decoration: none;cursor: pointer;}
li{list-style: none;cursor: pointer;}
h3{font-size: 14px;font-weight: normal;margin-bottom: 10px;}

.wrap{width: 330px;height: auto;margin: 50px auto;border: 1px solid #333;border-radius: 5px;}
#set_style_btn{display: block;width: 100%;height: 30px;line-height: 30px;text-align: center;background: blue;color: #fff;font-size: 14px;}
#box{width: 80px;height: 80px;border: 2px solid #333;border-radius: 5px;margin: 50px auto;line-height: 80px;text-align: center;font-size: 14px;background: blue;color: #fff;}
#bg{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);display: none;;}
#set_style{position: fixed;top: 50px;left: 50%;margin-left: 175px;width: 200px;height: 300px;background: #fff;padding: 10px;display: none;border-radius: 5px;}
#bg_color, #set_width, #set_height{width: 100%;height: 50px;margin-bottom: 10px;}
#bg_color li, #set_width li, #set_height li{width: 50px;height: 50px;line-height: 50px;float: left;text-align: center;margin-left: 10px;border-radius: 5px;}
#red{background-color: red;color: #ccc;}
#yellow{background-color: yellow;}
#blue{background-color: blue;color: #fff;}
#h100, #h200, #h300, #w100, #w200, #w300{background: #ccc;}
#btn{width: 100%;height: 30px;}
#btn a{display: inline-block;width: 92px;height: 30px;line-height: 30px;text-align: center;font-size: 14px;background: #000;color: #fff;border-radius: 5px;margin-right: 10px;}
#btn a:nth-child(2){margin-right: 0;}