html5充值页面（Vue）

可直接复制到html中查看效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>加油卡充值</title><script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script><script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<style>* {margin: 0;padding: 0;}.top {width: 100%;height: 2rem;background-color: white;text-align: center;}.top p {width: 100%;font-size: 1.5rem;}body {background-color: #F4F4F4;}.back {background-color: white;width: 96%;border-radius: 10px;margin-left: 2%;margin-top: 2%;padding-bottom: 2%;padding-top: 2%;}.bechoice {background: green !important;color: white !important;}.information {display: flex;flex-direction: column;width: 100%;}.information span {width: 95%;font-size: 1.1rem;margin-left: 2%;}.information input {width: 95%;border-radius: 7px;height: 2rem;text-align: center;line-height: 2rem;outline: none;color: green;font-size: 1.1rem;border: 2px solid;margin-top: 2.5%;margin-left: 2%;margin-bottom: 2.5%;}.choice {width: 100%;margin-top: 1rem;margin-bottom: 1rem;}.choice p {font-size: 1.1rem;margin-left: 2%;}.recharge_hurg ul {flex-direction: row;width: 100%;flex-wrap: wrap;display: flex;justify-content: center;}.recharge_hurg ul li {list-style-type: none;width: 29.5%;margin-right: 2%;border-radius: 0.5rem;height: 2.5rem;text-align: center;line-height: 2.5rem;margin-bottom: 1rem;border: 2px green solid;color: green;}.recharge_hurg ul li:nth-child(3n) {margin-right: 0 !important;}.recharge_hurg_price {width: 100%;text-align: center;margin: 1.25rem 0;}.recharge_hurg_price span {color: green;font-weight: 600;font-size: 23px;}.recharge_btn {width: 96%;background: green;color: white;height: 2.5rem;border-radius: 0.5rem;text-align: center;line-height: 2.5rem;font-size: 1.25rem;}.recharge_hurg ul input {list-style-type: none;width: 100%;margin-right: 2%;border-radius: 7px;height: 35px;text-align: center;line-height: 40px;border-style: none;text-shadow: none;-webkit-appearance: none;box-shadow: none;outline: none;color: green;font-size: 1.1rem;}::-webkit-input-placeholder {/* WebKit, Blink, Edge */color: #aaa;}:-moz-placeholder {/* Mozilla Firefox 4 to 18 */color: #aaa;opacity: 1;}::-moz-placeholder {/* Mozilla Firefox 19+ */color: #aaa;opacity: 1;}:-ms-input-placeholder {/* Internet Explorer 10-11 */color: #aaa;}
</style><body><div id="Vue"><div class="top"><p>中石化油卡充值</p></div><div class="back"><div class="information"><span>姓名：</span><input type="text" placeholder="请输入持卡人姓名" v-model="name" onkeyup="value=value.replace(/[\d]/g,'') "oninput="if(value.length>30)value=value.substring(0,30)"><span>电话：</span><input type="number" placeholder="请输入您的号码" v-model="phone"onkeyup="this.value=this.value.replace(/\D/g,'')"oninput="if(value.length>11)value=value.substring(0,11)"><span>卡号：</span><input type="number" placeholder="请输入卡号" v-model="card"onkeyup="this.value=this.value.replace(/\D/g,'')"></div><div class="choice"><p>请选择充值的金额</p></div><div class="recharge_hurg"><ul><li :class="[index == status ? 'bechoice':'']" v-for="(item,index) in list" :key="index"@click="choicePrice(index,item.price)">{{item.price}}元</li><li><input id="otheramount" type="number" placeholder="其他金额" @click="choiceother" v-model="question"onkeyup="this.value=this.value.replace(/\D/g,'')"oninput="  if(value>999999)value=999999;if(value.length>7)value=value.substring(0,7)"></li><p class="recharge_hurg_price">充值金额：<span>{{thePrice}}.00</span><span style="color: black;">元</span></p><div class="recharge_btn" @click="wxpaly">微信充值</div></div></div></div></body>
<script>new Vue({el: "#Vue",data: {ko: "",question: "",status: 0,thePrice: 10,confirm: "",name: "",phone: "",card: "",list: [{ price: 10 },{ price: 20 },{ price: 30 },{ price: 50 },{ price: 100 },{ price: 300 },{ price: 500 },{ price: 1000 },],},watch: {// 如果 `question` 发生改变，这个函数就会运行question: function (newQuestion, oldQuestion) {//如果第一位数为0时if (this.question[0] == "0") {console.log(this.question[0])this.question = ""this.thePrice = 0}//如果question为空时if (this.question == "") {this.thePrice = 0}else {this.thePrice = this.questionthis.question = this.question.replace(/\D/g, '')}},// 如果 `name` 发生改变，这个函数就会运行name: function (newName, oldName) {if (this.name[0] == "0") {this.name = ""console.log(1)}},// 如果 `phone` 发生改变，这个函数就会运行phone: function (newPhone, oldPhone) {//如果第一位数为0时if (this.phone[0] == "0") {this.phone = ""}this.phone = this.phone.replace(/\D/g, '')console.log(1)},// 如果 `card` 发生改变，这个函数就会运行card: function (newCard, oldCard) {}},methods: {choicePrice(index, price) {this.status = indexthis.thePrice = price},choiceother() {this.status = null//当`question`为空时 if (this.question == "") {this.thePrice = 0}},wxpaly() {// console.log(this.confirm = parseInt(this.thePrice))if (this.name == "" || this.phone == "" || this.card == "") {alert("请填写空余信息")} else {console.log(this.name)console.log(this.phone)console.log(this.card)console.log(this.confirm = parseInt(this.thePrice))alert("姓名：" + this.name + "\n" + "手机号码：" + this.phone + "\n" + "卡号：" + this.card + "\n" + "你要充值的金额为：" + this.confirm)}},input() {}},created() {}})
</script>
<script>$(document).ready(function () {});
</script></html>

html5充值页面（Vue）相关推荐

单页活动页面html,优秀HTML5活动页面
一个好的手机活动宣传更能让人分享传播是爆炸性的下面是我平时看到一些好的微信活动宣传页面分享给大家其中用到的技术常做微信活动专题页面的人可以看看大神们是怎么做的这样到自己做的时候 ...
HTML5手机页面里面如何把长按复制避免
在写HTML5手机页面的时候,有时候会写到一些标签是需要用户长按然后放开的但是微信里面长按就会出现复制,大大影响了用户体验,那么如何可以避免呢? 我也是最近写到这样的页面,总结了一部分,大家可以作为 ...
玩转HTML5移动页面
(1) 动画雪碧图涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)! 网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和G ...
微信的充值页面为啥长这样？（多图）
PMCAFF(pmcaff.com)是中国"非常"in的产品经理社区.汇集160000+会员,8000+业界大咖,致力于为产品人提供专业的产品沙龙.课程培训.求职招聘等服务. 本文 ...
html对话框跳转页面,html5各种页面切换效果和模态对话框用法总结
这篇文章主要为大家介绍了html5各种页面切换效果和模态对话框用法总结,较为详细的介绍了HTML5的各种页面元素的使用技巧,非常具有实用价值,需要的朋友可以参考下本文详细总结了html5各种页面切换 ...
html5页面的手势,HTML5单页面手势滑屏切换如何实现
这次给大家带来HTML5单页面手势滑屏切换如何实现,怎么实现HTML5单页面手势滑屏切换?HTML5单页面手势滑屏切换的注意事项有哪些,下面就是实战案例,一起来看一下. H5单页面手势滑屏切换是采用H ...
html5页面适配方法,H5案例分享：HTML5移动页面适配方法
HTML5移动页面适配方法之前做过PC页面时考虑最多的是兼容,这是因为浏览器之间的差异引起的.而移动端是基本没有"兼容"的问题了,全是CSS3,是不是很开心,但是开心早了,因为适 ...
抓包抖音充值页面实现微信支付宝充值抖币,可提供api
抖币充值系统重写升级: 1.支持配置扫码配置多个CK 2.支持生成微信/支付宝支付二维码扫码充值 3.支持微信/支付宝 APP 直接唤醒充值体验如下: 需要的小伙伴可私信留言! 整个开发流 ...
微信充值页面开发总结
上周开发了公司项目的微信充值页面,下面对项目遇到的问题做一个总结. 1.下单流程前端获取code---把code给后端去获取openID---将openID和订单信息发给后端获取微信支付所需参数(订 ...

html5充值页面（Vue）

html5充值页面（Vue）相关推荐

最新文章

热门文章