pageadmin如何做網(wǎng)站數(shù)據(jù)分析培訓(xùn)班
| 1、完成輸入框內(nèi)容的實(shí)時(shí)反向輸出。
2、銀行賬戶余額變動自動通知項(xiàng)目。 設(shè)計(jì)要求：單擊按鈕后，余額按照輸入框的數(shù)額減少，同時(shí)將按鈕式的提示信息（金額）同步改變。利用偵聽屬性實(shí)現(xiàn)余額發(fā)生變化時(shí)發(fā)出提示信息，同時(shí)記錄每次支出明細(xì)，每筆記錄包含支取次數(shù)，支取金額、余額等信息。
3、學(xué)生信息采集 ① 定義Vue實(shí)例，分別完成el、data、methods、watch等選項(xiàng)的配置
② 信息采集。分別通過表單輸入獲取省份、城市、縣、街道等信息，只要其中有一個(gè)值發(fā)生變化，都需要綁定keyup事件，調(diào)用getAddress()方法，觸發(fā)更新家庭地址。
|
? ? <div id="app"> ? ? ? ? <hr> ? ? ? ? 輸入內(nèi)容：<input type="text" v-model="message"><br> ? ? ? ? 反轉(zhuǎn)內(nèi)容：{{message.split('').reverse().join('')}} ? ? </div>
? new Vue({ ? ? ? ? ? ? el:'#app', ? ? ? ? ? ? data:{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? money1:100000, ? ? ? ? ? ? ? ? money2:500, ? ? ? ? ? ? ? ? money3:100000, ? ? ? ? ? ? ? ? sum:0, ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? watch:{ ? ? ? ? ? ? ? ? money3:{ ? ? ? ? ? ? ? ? ? ? handler:function(newValue,oldValue){ ? ? ? ? ? ? ? ? ? ? ? ? alert("賬戶余額由"+oldValue+"元變?yōu)?/span>"+newValue+"元"); ? ? ? ? ? ? ? ? ? ? ? ? console.log("賬戶余額由"+oldValue+"元變?yōu)?/span>"+newValue+"元") ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? methods:{ ? ? ? ? ? ? ? ? updata:function(){ ? ? ? ? ? ? ? ? ? ? this.money3=this.money3-this.money2; ? ? ? ? ? ? ? ? ? ? this.money1=this.money3; ? ? ? ? ? ? ? ? ? ? this.sum=this.sum+1; ? ? ? ? ? ? ? ? ? ? var objSelect=document.getElementById("number8"); ? ? ? ? ? ? ? ? ? ? ? objSelect.focus(); ? ? ? ? ? ? ? ? ? ? var s=null; ? ? ? ? ? ? ? ? ? ? s="第"+this.sum+"次，支取"+this.money2+"元，余額為"+this.money1; ? ? ? ? ? ? ? ? ? ? objSelect.options.add(new Option(s,)); ? ? ? ? ? ? ? ? ? ? this.money2=0; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? <script> ? ? ? ? new Vue({ ? ? ? ? ? ? el:"#app", ? ? ? ? ? ? data:{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? province:'', ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? city:'', ? ? ? ? ? ? ? ? ? ? street:'', ? ? ? ? ? ? ? ? ? ? address:'', ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? watch:{ ? ? ? ? ? ? ? ? province:{ ? ? ? ? ? ? ? ? ? ? handler: function (newValue, oldValue) { ? ? ? ? ? ? ? ? ? ? console.log("對象記錄：新值："+newValue + "--------- 舊值："+oldValue) ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? } ? ? ? ? ? ? }, ? ? ? ? ? ? methods:{ ? ? ? ? ? ? ? ? getAddress:function(){ ? ? ? ? ? ? ? ? ? ?this.address=this.province+" "+this.city+" "+this.street; ? ? ? ? ? ? ? ?} ? ? ? ? ? ? } ? ? ? ? }) ? ? </script>
|
| 1
2
3 |
JavaScript使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的、動態(tài)的、可交互的表達(dá)能力。從而基于CGI靜態(tài)的HTML、頁面將被可提供動態(tài)實(shí)時(shí)信息并可監(jiān)視信息變化。 |
| 1. <!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <title>Document</title> ? ? <script src="vue.js"></script> </head> <body> ? ? <div id="app"> ? ? ? ? <hr> ? ? ? ? 輸入內(nèi)容：<input type="text" v-model="message"><br> ? ? ? ? 反轉(zhuǎn)內(nèi)容：{{message.split('').reverse().join('')}} ? ? </div> ? ? <script> ? ? ? ? new Vue({ ? ? ? ? ? ? el:'#app', ? ? ? ? ? ? data:{ ? ? ? ? ? ? ? ? message:'' ? ? ? ? ? ? } ? ? ? ? }) ? ? </script> </body> </html> 2 <!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <title>Document</title> ? ? <script src="vue.js"></script> </head> <body> ? ? <div id="app"> ? ? ? ? <h3>銀行賬戶余額變更通知</h3> ? ? ? ? 余額為：{{money1}}元<br> ? ? ? ? 支取人民幣為：<input type="text" v-model="money2"><button v-on:click="updata">支取{{money2}}元</button><br> ? ? ? ? 支取后人民幣余額為：{{money3}}元<br> ? ? ? ? <h3>以下是支出明細(xì)賬</h3> ? ? ? ? <hr size="2"> ? ? ? ? <table> ? ? ? ? ? ? <tr> ? ? ? ? ? ? ? ? <td rowspan="3"> ? ? ? ? <select name="number7" id="number8" size="2" οnfοcus=”this.select()” οnmοuseοver=”this.focus()”> ? ? ? ? </select> ? ? ? ? ? ? ? ? </td> ? ? ? ? ? ? </tr> ? ? ? ? </table> ? ? </div> ? ? <script> ? ? ? ? ? ? ? ? new Vue({ ? ? ? ? ? ? el:'#app', ? ? ? ? ? ? data:{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? money1:100000, ? ? ? ? ? ? ? ? money2:500, ? ? ? ? ? ? ? ? money3:100000, ? ? ? ? ? ? ? ? sum:0, ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? watch:{ ? ? ? ? ? ? ? ? money3:{ ? ? ? ? ? ? ? ? ? ? handler:function(newValue,oldValue){ ? ? ? ? ? ? ? ? ? ? ? ? alert("賬戶余額由"+oldValue+"元變?yōu)?/span>"+newValue+"元"); ? ? ? ? ? ? ? ? ? ? ? ? console.log("賬戶余額由"+oldValue+"元變?yōu)?/span>"+newValue+"元") ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? methods:{ ? ? ? ? ? ? ? ? updata:function(){ ? ? ? ? ? ? ? ? ? ? this.money3=this.money3-this.money2; ? ? ? ? ? ? ? ? ? ? this.money1=this.money3; ? ? ? ? ? ? ? ? ? ? this.sum=this.sum+1; ? ? ? ? ? ? ? ? ? ? var objSelect=document.getElementById("number8"); ? ? ? ? ? ? ? ? ? ? ? objSelect.focus(); ? ? ? ? ? ? ? ? ? ? var s=null; ? ? ? ? ? ? ? ? ? ? s="第"+this.sum+"次，支取"+this.money2+"元，余額為"+this.money1; ? ? ? ? ? ? ? ? ? ? objSelect.options.add(new Option(s,)); ? ? ? ? ? ? ? ? ? ? this.money2=0; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }, ? ? ? } ? ? ? ? ? ? } ? ? ? ? ) ? ? </script> </body> </html> 3. <!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <title>Document</title> ? ? <script src="vue.js"></script> </head> <body> ? ? <div id="app"> ? ? ? ? <form action=""> ? ? ? ? ? ? <fieldset> ? ? ? ? ? ? ? ? <legend align="center">學(xué)生地址信息采集</legend> ? ? ? ? ? ? ? ? 姓名：<input type="text" v-model="name"><br> ? ? ? ? ? ? ? ? <hr> ? ? ? ? ? ? ? ? 省份：<input type="text" v-model="province" v-on:keyup="getAddress()"><br> ? ? ? ? ? ? ? ? 城市：<input type="text" v-model="city" v-on:keyup="getAddress()"><br> ? ? ? ? ? ? ? ? 縣、區(qū)或街道：<input type="text" v-model="street" v-on:keyup="getAddress()"><br> ? ? ? ? ? ? ? ? 家庭地址：<input type="text" v-model="address" v-on:keyup="getAddress()"><br> ? ? ? ? ? ? ? ? <input type="submit" value="提交"> <input type="reset" value="重置"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? </fieldset> ? ? ? ? </form> ? ? </div> ? ? <script> ? ? ? ? new Vue({ ? ? ? ? ? ? el:"#app", ? ? ? ? ? ? data:{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? province:'', ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? city:'', ? ? ? ? ? ? ? ? ? ? street:'', ? ? ? ? ? ? ? ? ? ? address:'', ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? watch:{ ? ? ? ? ? ? ? ? province:{ ? ? ? ? ? ? ? ? ? ? handler: function (newValue, oldValue) { ? ? ? ? ? ? ? ? ? ? console.log("對象記錄：新值："+newValue + "--------- 舊值："+oldValue) ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? } ? ? ? ? ? ? }, ? ? ? ? ? ? methods:{ ? ? ? ? ? ? ? ? getAddress:function(){ ? ? ? ? ? ? ? ? ? ?this.address=this.province+" "+this.city+" "+this.street; ? ? ? ? ? ? ? ?} ? ? ? ? ? ? } ? ? ? ? }) ? ? </script> </body> </html> |
