Use Per.js to quickly develop product price calculation Pages - for Per.js3.0

Preview all the code first:

<!DOCTYPE html>
<html>
    <head>
        <title>Per.js Demo</title>
        <meta charset="UTF-8">
    </head>
    <body id="body">
        <div id="page1">
            <h1>Welcome to use this price calculation!</h1>
        </div>
        <div id="page2" style="display: none;">
            <ul p-loop-in="var1">
                <li>This is {{var1.name}}</li>
                <li>The price is: {{var1.price}}<span p-con="{{var1.price > 20}}"> - To expensive!</span></li>
            </ul>
        </div>
        <button id="tp1">to page1</button>
        <button id="tp2">to page2</button>
        <button id="btn-refre">Refresh</button>
        <script src="Per.js"></script>
        <script>
            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);
                }
            });
        </script>
    </body>
</html>

Then send out a wave of effects:

Yes, it's such a page. Then I'll teach you how to make it.

Write the basic page format first.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Per.js Demo</title>
    </head>
    <body>

    </body>
</html>

Then we use script tags to introduce Per.js files:

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

Then we put the basic structure in the body tag:

<div id="page1">
    <h1>Welcome to use this price calculation!</h1>
</div>
<div id="page2" style="display: none;">
    <ul p-loop-in="var1">
        <li>This is {{var1.name}}</li>
        <li>The price is: {{var1.price}}<span p-con="{{var1.price > 20}}"> - To expensive!</span></li>
    </ul>
</div>
<button id="tp1">to page1</button>
<button id="tp2">to page2</button>
<button id="btn-refre">Refresh</button>

Then write the js statement in the script tag:

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);
    }
});

Then open the browser, and it will execute normally!

The effect is the same as the gif chart above!

[tips: Per.js >= version 3.0 must be used]

Posted by Timewell on Wed, 23 Jan 2019 02:48:13 -0800

Programmer Group

Use Per.js to quickly develop product price calculation Pages - for Per.js3.0

Hot Keywords