点击生成圣诞树
<style type="text/css">
*{margin: 0; padding: 0;}
div p{
text-align: center;
}
</style>
</head>
<body>
<button>点击生成圣诞树</button>
<div></div>
<script type="text/javascript">
var aBtn = document.getElementsByTagName( 'button' ),
aBox = document.getElementsByTagName( 'div' );
var num = 15;
var xxing = '';
aBtn[0].onclick = function(){
for( var i=0 ; i<num ; i++){
var sum = '';
if( i<num/4*3 ){
for(var j=0 ; j<2*i+1 ; j++){
sum += '*';
}
} else{
for(var j=0 ; j<6 ; j++){
sum += '*';
}
}
xxing += '<p>' + sum + '</p>';
}
aBox[0].innerHTML = xxing;
}
</script>
image.png
自定义复选框
<style>
ul li{
float: left;
width: 80px;
height: 20px;
text-align: center;
line-height: 20px;
text-index: 28px;
background: url( 'images/1.jpg' ) no-repeat;
}
ul li.pic{
background: url( 'images/2.jpg' ) no-repeat;
}
</style>
<body>
<h1>你喜欢哪个水果呢</h1>
<ul>
<li>梨子</li>
<li>苹果</li>
<li>香蕉</li>
<li>李子</li>
<li>椰子</li>
</ul>
<script>
var aBox = document.getElementsByTagName ( 'li' );
//分为2个种情况
// 第一情况：li里没有class的时候
for( var i=0 ; i<aBox.length ; i++ ){
aBox[i].onclick = function(){
if( this.className ==='' ){ // this.className ===''判断是否是空字符，如果是为真 加上类名 pic ，如果不是把class变为空
this.className = 'pic';
} else {
this.className = '';
}
//三目写法
this.className = this.className ==='' ? 'pic' : '' ;
}
}
// 第二情况：li里有class的时候
// 思路：我们会联想到之前2张图片点击切换的时候，但是现在是多张图片，没办法用一个变量来判断现在图片是的状态，要用多个变量来判断；
//现在我们要控制多个，每个的状态之间没有联系
//所有，要定义多个变量去我才看了控制他们的状态
var arrBool = [ ]; //里面所有的子数据都undefined 为假的的情况；
for( var i=0 ; i<aBox.length ; i++ ){
aBox[i].befCla = aBox[i] . className; //作用是把原来calss的值存起来；以备下面等会还原；
aBox[i].num = i;
aBox[i].onclick = function(){
if( arrBool[ this.num ] ){ //arrBool[ this.num ]里面所有数都是undefined 为假的 假的的时候执行else
this.className = this.befCla
} else {
this.className += ' pic'; //不能直接用=号，因为会直接覆盖原来的，注意 pic前面要加空格不加的话会变成 apic 加空格后是a pic
}
arrBool[ this.num ] = ! arrBool[ this.num ];// 取返，真变假，假变真
}
}
</script>
</body>
效果
