您的位置：首页 > Web前端 > JavaScript

avalon指令和js函数简单介绍

2015-12-02 10:02 267 查看

1.setInterval函数和setTimeout函数

这两个函数的作用都是在指定时间T后执行指定函数。但setTimeout在T时间后执行了一次后就不再执行了，而setInterval则每经过T时间就执行一次。

两个函数的具体使用格式为：setInterval（function(){.......函数内容}/函数名，间隔时间T）以及setTimeout（function(){.......函数内容}，间隔时间T）

注意，当使用setInterval(函数名，间隔时间T)这一形式时，函数名不要加括号和双引号，比如，我们先定义一个函数：

function drawStar() {
var positionRight;
var positionTop;
(function getPosition() {
positionRight = Math.random() * 1200 + 100;
positionTop = Math.random() * 600 + 100;
})();
var animateLastTime=Math.random()*1500+1200;
$(".div").prepend("<div><div><div><div><div></div></div></div></div></div>");
$(".div>div").animate({ right: positionRight, top: positionTop }, animateLastTime);

};

然后在setInterval中使用方法如下：

setInterval(drawStar,1000);

而不是

setInterval(”drawStar()",1000);

2、ms-if=“表达式”和ms-visible=“表达式“”

<span style="font-size: 18px;"> </span><span style="font-size:10px;"> <head>
<span style="white-space: pre;">	</span><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
percent: 0
})
var a = true
var id = setInterval(function() {
if (a) {
if (model.percent < 100) {
model.percent++
} else {
a = false
}
} else {
if (model.percent > 0) {
model.percent--
} else {
a = true
}
}
}, 100)
</script>

</head>
</span>

这两个指令都是通过表达式的值来判断是否显示标签内容，若表达式为真，则显示标签内容，否则不显示。代码示例如下：

<!DOCTYPE HTML>

<html>

<head>

<title>ms-if</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="avalon.js"></script>

<script>

var vmodel = avalon.define({

$id: "test",

object: {}

})

setInterval(function() {

vmodel.object = {

id: "132",

message: "显示！！"

}

}, 3000)

setInterval(function() {

vmodel.object = {}

}, 5000)

</script>

</head>

<body>

<div ms-controller="test">

这是比较输出结果:{{object.id != null}}

<div ms-visible="object.id != null">

这是visible的:

<span>{{object.message}}</span>

</div>

<div ms-if="object.id != null">

这是if的:

<span>{{object.message}}</span>

</div>

</div>

</body>

</html>

3、<ms-each-XXX=“数组名”>

该指令的作用是遍历指定数组，并且遍历过程中XXX表示当前所指数组中的对象。实例如下：

<div ms-each-el="array">

<p ms-click="click1(el,$event)">{{el}}</p>

</div>

该段代码的作用就是遍历“array”数组，将数组中的所有对象依次显示出来，并且传入vm中定义的click1函数中（vm定义的代码我未贴出，在vm中定义了一个函数click1()）

4、data-duplex-changed="函数名"

该代码的作用为当其所在控件值发生变化时，调用vm中对应的函数。代码示例：

vm定义代码：

<script>
var model=avalon.define({
$id:"test",
all_select:false,
checkbox_array:[{checked:false},{checked:false},{checked:false}],
all_select_change:function(){

....函数定义内容

}

})
</script>

html代码：

<input type="checkbox" data-duplex-changed="all_select_change">全选</input>

则该代码的作用就是当该checkbox被选中或取消选中时，调用vm中的all_select_change方法。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航