验证码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../Vue.js"></script>
</head>
<body>
<div id="root">
<table cellspacing="10">
<tr>
<td>注册邮箱: </td>
<td><input></td>
</tr>
<tr>
<td></td>
<td>你还可以使用手机号注册</td>
</tr>
<tr>
<td>创建密码:</td>
<td><input></td>
</tr>
<tr>
<td>真实姓名:</td>
<td><input></td>
</tr>
<tr>
<td align="right">性别:</td>
<td>
<input type="radio" name="aaa" value="1">男
<input type="radio" name="aaa" value="2">女
</td>
</tr>
<tr>
<td align="right">生日:</td>
<td>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>年
<select>
<option>01</option>
<option>02</option>
<option>03</option>
</select>月
<select>
<option>01</option>
<option>02</option>
<option>03</option>
</select>日
</td>
</tr>
<tr>
<td align="right">我正在:</td>
<td>
<select>
<option>学习</option>
<option>睡觉</option>
<option>运动</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<img id="img1" :src="src" style="vertical-align: middle">
<span @click="change1">看不清换一张?</span>
</td>
</tr>
<tr>
<td align="right">验证码:</td>
<td><input id="inputStr" v-model="inputStr"></td>
</tr>
<tr>
<td></td>
<td>
<img src="btn_reg.gif" @click="click1">
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#root',
data: {
listImgUrl: ['1111.png', '1234.png', '2222.png', '3333.png'],
listImgNumber: ['1111', '1234', '2222', '3333'],
mid: -1,
src: 'verycode.gif',
inputStr: ''
},
methods: {
change1: function () {
var bool = true
while (bool) {
var tag = Math.floor(Math.random() * (this.listImgUrl.length))
if (tag == this.mid){
} else {
bool = false
this.mid = tag
}
}
this.src = this.listImgUrl[tag]
},
click1: function () {
var nowValue = this.listImgNumber[this.mid]
if (this.mid == -1){
if (this.inputStr == 'bnksu'){
alert('验证码正确')
} else {
alert('验证码错误')
}
return
}
if (nowValue == this.inputStr){
alert('验证码正确')
} else {
alert('验证码错误')
}
}
}
})
</script>
</body>
</html>
汇率：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[colspan] {
background: red;
}
td{
width: 200px;
height: 30px;
text-align: center;
}
select, button {
height: 30px;
}
input{
height: 20px;
}
div {
margin-bottom: 4px;
}
</style>
<script src="../Vue.js"></script>
</head>
<body>
<div id="root">
<div >
<select id="select1" v-model="select1">
<option value="1">美元</option>
<option value="2">人民币</option>
<option value="3">欧元</option>
<option value="4">日元</option>
<option value="5">韩元</option>
<option value="6">港元</option>
</select>
<button @click="change1">互换</button>
<select id="select2" v-model="select2" @change="chang2">
<option value="1">美元</option>
<option value="2">人民币</option>
<option value="3">欧元</option>
<option value="4">日元</option>
<option value="5">韩元</option>
<option value="6">港元</option>
</select>
数额:
<input id="inputStr" v-model="inputStr">
<button @click="click1">汇率换算</button>
</div>
<table border="1px">
<tr>
<td colspan="3">按当前汇率兑换结果</td>
</tr>
<tr>
<td id="td11">{{td11}}</td>
<td>汇率</td>
<td id="td13">{{td13}}</td>
</tr>
<tr>
<td id="td21">{{td21}}</td>
<td id="td22">{{td22}}</td>
<td id="td23">{{td23}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#root',
data: {
listRate : [1, 7, 0.9 , 100, 1000, 7],
listM : ['美元', '人民币', '欧元', '日元', '韩元', '港元'],
td11: '美元',
td13: '人民币',
td21: '100',
td22: '7',
td23: '700',
inputStr: '',
select1: '1',
select2: '1'
},
methods: {
click1: function () {
var rate = this.listRate[this.select2 -1] / this.listRate[this.select1 -1]
var money = this.inputStr*rate
this.td11 = this.listM[this.select1-1]
this.td13 = this.listM[this.select2-1]
this.td21 = this.inputStr
this.td22 = rate
this.td23 = money
},
change1: function () {
var mid = this.select1
this.select1 = this.select2
this.select2 = mid
},
chang2: function () {
var rate = this.listRate[this.select2 -1] / this.listRate[this.select1 -1]
var money = this.inputStr*rate
this.td11 = this.listM[this.select1-1]
this.td13 = this.listM[this.select2-1]
this.td21 = this.inputStr
this.td22 = rate
this.td23 = money
}
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
