hilo.js基础案例

JavaScript043

hilo.js基础案例,第1张

http://hilo-js.github.io/

无依赖,模块化,小,兼容性良好,自动化构建,阿里巴巴集团开发的html5跨终端游戏框架,帮助快速开发html5游戏。支持多种模块规范的版本,目前公司开发游戏使用的是commonJS这种方式。

舞台(Stage)--是一个大的载体,所有要展现在页面中的内容都需要添加到舞台中,才会渲染。

定时器(Ticker)--舞台上的内容发生变化和运动,通过一定的频率一直刷新运行

可视对象(Bitmap)--舞台上的一切都是可是对象,图片,文字,雪碧图/精灵图

x:100

y:100

scaleX: .2, //缩放比例

scaleY: .2 //缩放比例

x:100

y:100

scaleX: 1.4, //缩放比例

scaleY: 1.4 //缩放比例

demo      //项目名称

       dist      //静态资源文件

              images      //图片存放处

              index.html      //html入口文件

       index.js      //js入口文件

       stage.js      //舞台js

       bird.js      //可视对象js

舞台只有一个

可视对象可以有无数个

针对不同的可视对象,君使其东而东之,使其西之而西之。

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显示隐藏的案例:

<!DOCTYPE html>

<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>