入门 - 实践：加分器

本文导航

  1. 需求
  2. 思路
  3. 代码

  • 作者：KK

  • 发表日期：2016.2.18

本章节开始将入门知识使用到程序开发中看看它们都能做出怎样的东西

如题所示，我们要做一个加分器来试一下，一般做程序之前先要知道需求，需求就是为了表达"有什么需要，有什么诉求，我们要将程序做成什么样"

需求

我们需要做一个很简单的东西

它有两个按钮，和一个分数显示区域，一个按钮是加分按钮，一个按钮是扣分按钮

点击不同按钮时分数对应地加减显示

当分数减到0分时会进行提示，达到20分时也进行提示

思路

两个按钮就需要用两个button标签做出来

而分数显示区域看要做成什么样式，基本上用什么标签包住都一样

我们这里不搞漂亮的界面，实际上我也不懂界面设计，丑丑的就行了，重点是功能的实现

代码 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>加分器</title>
<script type="text/javascript">
//这个函数用来设置分数加减
function setPoint(isAdd){
	if(isAdd == undefined){
		//如果没有传参数进来，那么就将isAdd参数的值设置为true
		isAdd = true;
	}

	if(isAdd == true){
		point++;
	}else{
		point--;
	}

	showPoint(point);

	//这个时候才判断分数做提示，是因为我说了需求是达到20分时提示，但如果从21分减到20分就不是"达到"的情况了，19分加到20才是达到，isAdd==true为加分操作
	if(isAdd == true && point == 20){
		alert('达到20分了');
	}else if(isAdd == false && point == 0){
		//这里也是，我说了减到0分时才提示，但-1分加到1分就不是减到0分嘛，isAdd==false为减分操作
		alert('被扣剩0分了~~');
	}
}

//这个函数用来显示分数
function showPoint(point){
	var pointElement = document.getElementById('pointWrap');
	pointElement.innerHTML = point + '分';
}

var point = 10; //这个变量用来保存分数
</script>
</head>
<body onload="showPoint(point)"><!--页面加载后显示分数先-->

<div class="content">
	<div id="pointWrap" class="pointWrap"></div>
	
	<div class="controls">
		<button type="button" onclick="setPoint()">加分</button>
		&nbsp;
		<button type="button" onclick="setPoint(false)">扣分</button>
	</div>
</div>

<!--上面的JS代码才是核心，以免干扰你阅读，所以我把样式代码写在下面-->
<style type="text/css">
.content{width:200px; height:100px; margin:60px auto 0; padding:10px; border:1px solid #CCC; background:#0094E7; border-radius:4px; font-family:"微软雅黑";}
.pointWrap{text-align:center; font-size:33px; font-weight:bold; color:#FFF; margin-top:5px;}
.controls{text-align:center; margin-top:20px;}
.controls button{padding:5px 10px; border-radius:4px; border:1px solid #FFF; background:#0094E7; color:#FFF; font-weight:bold; transition:0.6s; cursor:pointer;}
.controls button:hover{background:#FFF; color:#0094E7; transition:0.6s;}
/*上面用到一个我的教程中没出现过的样式属性"transition"，有兴趣的话请自己上网搜索，并且不是所有浏览器都能呈现这个样式的效果*/
</style>
</body>
</html>

效果如下：