html计算商品价格,使用Per.js快速开发商品价格计算页面 - for Per.js3.0

先预览一下全部代码：

Per.js Demo

Welcome to use this price calculation!

• This is {{var1.name}}
• The price is: {{var1.price}} - To expensive!

to page1

to page2

Refresh

Per.use("Per.page");

Per.page.create.pageGroup("allPage");

Per.page.create.page("allPage","#page1");

Per.page.create.page("allPage","#page2");

var app = Per("ul");

app.dom({

loop: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}],

callback: function(){

Per("span").dom({

con: "in"

});

}

},true,true);

Per("#btn-refre").dom({

info: {

item: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}]

},

click: function(){

this._super.innerHTML = "Refresh now!";

var val = parseInt(Math.random()*30+1);

this.item[0].price = val;

val = parseInt(Math.random()*30+1);

this.item[1].price = val;

val = parseInt(Math.random()*30+1);

this.item[2].price = val;

app.dom.loop = this.item;

}

});

Per("#tp1").dom({

click: function(){

Per.page.to("allPage",1);

}

});

Per("#tp2").dom({

click: function(){

Per.page.to("allPage",2);

}

});

然后发上一波效果图：

没错，就是这样一个页面，那么接下来我就来教大家如何制作。

先把基本页面格式写好。

Per.js Demo

之后我们使用script标签来引入Per.js文件：

再然后，我们在body标签里面写上基本结构：

Welcome to use this price calculation!

• This is {{var1.name}}
• The price is: {{var1.price}} - To expensive!

to page1

to page2

Refresh

之后在script标签里面再写js语句：

Per.use("Per.page");

Per.page.create.pageGroup("allPage");

Per.page.create.page("allPage","#page1");

Per.page.create.page("allPage","#page2");

var app = Per("ul");

app.dom({

loop: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}],

callback: function(){

Per("span").dom({

con: "in"

});

}

},true,true);

Per("#btn-refre").dom({

info: {

item: [{name: "apple",price: 20},{name: "bread",price: 30},{name: "banana",price: 25}]

},

click: function(){

this._super.innerHTML = "Refresh now!";

var val = parseInt(Math.random()*30+1);

this.item[0].price = val;

val = parseInt(Math.random()*30+1);

this.item[1].price = val;

val = parseInt(Math.random()*30+1);

this.item[2].price = val;

app.dom.loop = this.item;

}

});

Per("#tp1").dom({

click: function(){

Per.page.to("allPage",1);

}

});

Per("#tp2").dom({

click: function(){

Per.page.to("allPage",2);

}

});

之后打开浏览器，就正常执行了！

效果如同上方gif图一样！

【tips：必须使用Per.js >= 3.0版本】