Vue.js 小練習
記得要載入Vue.js哦！！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width_=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
*{
margin: 0;
padding: 0;
font-size: 12px;
font-family: "微軟雅黑";
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
body{
height: 100vh;
width: 100vw;
background: url(img/one.jpg) no-repeat;
background-position: center;
background-size: cover;
}
.round{
width: 700px;
margin: 0 auto;
}
td,th{
color: white;
height: 35px;
width: 100px;
text-align: center;
}
td:nth-child(1){
text-align: right;
}
button,select{
width: 100%;
height: 100%;
background: none;
border: none;
}
input,select{
outline: white solid 1px;
-moz-outline: white solid 1px;
border: none;
background: none;
height: 100%;
}
#mycanvas{
position: absolute;
border-left: 1px solid white;
border-bottom: 1px solid white;
}
.can{
position: absolute;
width: 300px;
height: 600px;
}
.in_tip{
position: absolute;
color: white;
width: 120px;
height: 20px;
font-size: 10px;
}
.msg{
color: white;
}
</style>
</head>
<body>
<div class="round" id=app>
<table>
<thead>
<tr>
<th></th>
<th>{{Bank}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>存款人：</td>
<td><input type="text" v-model="C_data.name"/></td>
<td>姓名</td>
</tr>
<tr>
<td>存款方式：</td>
<td>
<select name="" v-model="C_data.cstyle">
<option value="0">固定期限</option>
<option value="1">不固定期限</option>
</select>
</td>
<td>
<span v-if="C_data.cstyle == 0">月利率為：{{C_data.interes}}</span>
<span v-else>月利率為：{{C_data.curint}}</span>
</td>
</tr>
<tr>
<td>存款金額：</td>
<td><input type="text" v-model="C_data.corpus"/></td>
<td><span v-if="C_data.corpus.match(/[^d]/)">格式錯誤</span><span v-else>ok</span></td>
</tr>
<tr>
<td>存款期限：</td>
<td>
<select name="" v-model="C_data.ctime">
<option value="3">3個月</option>
<option value="6">6個月</option>
<option value="12">12個月</option>
<option value="24">24個月</option>
<option value="36">36個月</option>
</select>
</td>
<td>{{C_data.ctime}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><button @click = "C_fin()">計算</button></td>
</tr>
</tfoot>
</table>
<canvas height="300" width_="600" id=mycanvas></canvas>
<div class="can" id=can></div>
<div class=msg>{{C_data.cmsg}}</div>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
var writetimer;
var bank = new Vue({
el:#app,
data:{
Bank : Vue.js練習--計算,
C_data : {
name : BMC,
cstyle : 0,//存儲方式
corpus : 5000,//本金
interes : 0.036,//月利率
curint : 0.022,//月利率
ctime : 12,// 存儲期限
cmsg :
},
C_msg :
},
methods:{
C_fin:function(){
var name = this.C_data.name,
corpus = this.C_data.corpus;
if(this.C_data.cstyle == 0){
var sty = 固定期限存儲方式;
var fina = ((this.C_data.corpus*this.C_data.interes)*this.C_data.ctime+parseInt(this.C_data.corpus));
var a = gepx(parseInt(this.C_data.corpus),this.C_data.interes,parseInt(this.C_data.ctime));
gocanvas(a,fina,corpus);
}else if(this.C_data.cstyle == 1){
var sty = 不固定期限存儲方式;
var fina = ((this.C_data.corpus*this.C_data.curint)*this.C_data.ctime+parseInt(this.C_data.corpus));
var a = gepx(parseInt(this.C_data.corpus),this.C_data.curint,parseInt(this.C_data.ctime));
gocanvas(a,fina,corpus);
}
this.C_msg = 尊敬的 +this.C_data.name+ 用戶,以 + sty + 存儲 +this.C_data.ctime+ 個月,最終包括本金將獲得： +fina+ 元。;
this.C_write();
},
C_write:function(){
clearInterval(writetimer);
bank.C_data.cmsg = ;
var i = -1;
writetimer = setInterval(function(){
if(++i > bank.C_msg.length-2){
clearInterval(writetimer);
}
bank.C_data.cmsg+= bank.C_msg[i];
},50)
}
}
})
function gepx(num,rate,mon){//計算坐標
var h = 300 ,
w = 600,//width
m = num*3,//num
dpy = Math.ceil(m/h),//dpy單位
dpx = Math.ceil(w/mon),//dpx單位
arr = [],inner = [];
for(var i = 0;i < mon;i++){
var fin_num = Math.ceil(((num*rate*i)+num)/dpy);
inner[0] = (i)*dpx;
inner[1] = h - fin_num;
arr.push(inner);
inner = [];
}
return arr;
}
var cantimer;
function gocanvas(arr,fina,corpus){
clearInterval(cantimer);
//開始繪製出canvas坐標
var o = document.getElementById(mycanvas);
var c = document.getElementById(can);
o.style.marginTop = 25px;
o.style.marginLeft = 5px;
var ocx = o.getContext(2d);
var h = o.height;
var w = o.width;
ocx.clearRect(0,0,w,h);
ocx.beginPath();
ocx.moveTo(0,h);
ocx.strokeStyle="white";
var i = -1;
cantimer = setInterval(function(){
if(++i > arr.length-2){
clearInterval(cantimer);
}
ocx.lineTo(arr[i][0],arr[i][1]);
ocx.arc(arr[i][0],arr[i][1],3,0,2*Math.PI);
ocx.stroke();
},100)
c.innerHTML = ;
var tip1 = document.createElement(div);
var tip = document.createElement(div);
tip1.className = in_tip;
tip.className = in_tip;
tip1.style.left = arr[0][0]+10+px;
tip.style.left = arr[arr.length-1][0]-10+px;
tip1.style.top = arr[0][1]+30 +px;
tip.style.top = arr[arr.length-1][1]+30+px;
tip1.innerHTML = ￥:+corpus;
tip.innerHTML = ￥：+fina;
c.appendChild(tip1);
c.appendChild(tip);
}
</script>
</body>
</html>
推薦閱讀：