实践 - 加菜

本文导航

  1. 本次实践的主要训练知识点

  • 作者：KK

  • 发表日期：2016.2.20

本次实践的主要训练知识点

  • 全局变量的应用(案例中的caiCount变量)

  • Dom元素对象的appendChild方法了解

  • 数量警界线判断逻辑

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>隐藏显示控制</title>
<script type="text/javascript">
function add(cai){
	if(caiCount >= 5){
		if(!confirm('哇!很少有人吃5个菜以上的喔!你真是买来吃的吗?')){
			return;
		}
	}

	var label = document.createElement('label');
	label.innerHTML = cai + '<br/>';
	document.getElementById('list').appendChild(label);

	/*
	//还可以这样,直接通过写HTML添加到innerHTML属性就可以了
	var list = document.getElementById('list');
	list.innerHTML = list.innerHTML + '<label>' + cai + '<br/></label>';
	*/

	caiCount++; //数量累加1
}

var caiCount = 0; //菜的数量
</script>
</head>
<body>
	<div>
		<button type="button" onclick="add('白菜')">加1份白菜</button>
		<button type="button" onclick="add('黑菜')">加1份黑菜</button>
		<button type="button" onclick="add('红菜')">加1份红菜</button>
	</div>
	<hr/>
	<div id="list"></div>
</body>
</html>

效果如下: