<html>
<head>
<meta charset="UTF-8">
<title>两数区间求和</title>
<style type="text/css">
.resCls{
width: 100%
height: auto
border: solid 1px #ddd
word-break: break-all /* 允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行 */
word-wrap: break-word /* 允许英文单词内断句换行 */
box-shadow: 4px 6px 8px #ccc
}
input{
box-shadow: 2px 4px 6px #ccc
width: 80px
}
p{
text-shadow: 4px 3px 4px #678
}
</style>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<p>输入两个非负整数：</p>
<input type="text" id="tx0" value="0" />
<input type="text" id="tx1" value="130" />
<input type="button" value=" 求和 " onclick="getSum()"/>
<br><br>
<span id="sum0"></span>
<div id="sum"></div>
<script>
$(function(){
//0~9的keyCode: 主键区48~57 , keyup/keydown:数字小键盘96~105 , keypress:全同
$("#tx0").bind("keypress",function(e){
if(!(e.keyCode>47 && e.keyCode<58)){
return false
}
})
$("#tx1").bind("keypress",function(e){
if(!(e.keyCode>47 && e.keyCode<58)){
return false
}
})
})
function getSum(){
var int0=Number($("#tx0").val())
var int1=Number($("#tx1").val())
if(isNaN(int0)){ //如果为“非数值”
return
}
if(isNaN(int1)){
return
}
var sum=0
var process=""
if(int0<int1){
for(var i=int0i<=int1i++){
sum+=i
process+=i+"+"
}
}else{
for(var i=int1i<=int0i++){
sum+=i
process+=i+"+"
}
}
process=process.substring(0,process.lastIndexOf("+"))+" = "
$("#sum").text(process + sum).addClass("resCls")
}
</script>
</body>
</html>
1、打开Hbuilder编辑器，新建一个html空白文档，输入基本的结构，然后按下Crtl+S保存一下：
2、创建一个button按钮，给按钮设置一个id，名字设置为“myBT”，创建一个用来显示隐藏的div，将其id设置为“main”：
3、给div和button设置一些样式，为了美观好看，这里无需设置display，因为默认就是显示的：
4、编写js脚本，这里用到Jquery，给button添加一个点击事件，然后获取div的dom，判断dom中的display属性值，如果是“none”，就显示div，否则则隐藏:
5、全部完成后，按下crtl+s保存，来到编辑器的右侧，观察显示效果，此时div是显示的：
6、点击hide按钮，会发现div消失了，反复点击按钮会重复显示隐藏的效果，以上就是用JS控制div显示隐藏的案例：
