Html流量充值页面效果
2017-09-10 10:48
106 查看
change.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>充流量</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.min.js"></script> <script src="js/vue.js"></script> </head> <body style="background:#f3f3f3"> <div id="change"> <div class="change_top"> <div class="change_top_num"> <div class="fr num_close" v-show="fillIn" @click="cancleNum"> <img src="image/close.png" alt=""> </div> <div class="num_input" @input="telNum"> <input type="text" placeholder="请输入手机号码(移动、联通、电信均支持!)" v-model="tel" @blur="telBlur"> </div> <div class="clear"></div> </div> <p class="change_top_addre" v-cloak>{{provice}}{{city}} <span class="num_ower">{{numOwer}}</span></p> </div> <div class="change_middle"> <p class="change_middle_title">全国可用,即时生效!</p> <ul class="change_middle_choose"> <li v-cloak v-for="(item,index) in chooseList" @click="chooseRechange(index)"> <div class="choose_classify" :class="{bgColor:item.checked}"> <p v-cloak>{{item.classify}}M</p> <p v-cloak>售价{{item.money}}元</p> </div> </li> <div class="clear"></div> </ul> <div class="change_middle_money"> <p v-cloak>{{nowPrice}}元 <span class="choose_special" v-cloak>原价:{{prePrice}}元</span></p> <p><span class="choose_range" v-cloak>{{range}}</span>全国流量,即时生效,月底失效</p> </div> </div> <div class="change_btn"> <button>支付</button> </div> </div> </body> </html> <script src="js/change.js"></script>
style.css
*{ padding: 0; margin: 0; list-style: none; font-family:'Helvetica Neue', 'Microsoft Jhenghei', Helvetica, sans-serif; color: #303030; } html,body { width:100%; height:100%; } .fl{ float: left; } .fr{ float: right; } .clear{ clear: both; } input,button{ outline: none; } [v-cloak] { display: none; } .change_top{ background: #fff; /*padding:0 15px;*/ margin-bottom: 10px; } .num_ower{ margin-left: 8px; color: #666666; } .change_top_num{ border-bottom: 1px solid #dcdcdc; height: 50px; line-height: 50px; padding: 0 15px; } ::-webkit-input-placeholder { color: #b8b8b8; } :-moz-placeholder { color: #b8b8b8; } ::-moz-placeholder { color: #b8b8b8; } :-ms-input-placeholder { color: #b8b8b8; } .num_close{ width: 19px; height: 19px; margin-top: 5px; } .num_close>img{ width: 100%; } .num_input{ margin-right: 25px; height: 40px; } .num_input>input{ width:100%; height:100%; box-sizing: border-box; border:none; font-size: 16px; } .change_top_addre{ line-height: 35px; color: #666666; font-size: 12px; padding:0 15px; } .change_middle{ background: #fff; } .change_middle_title{ padding:0 15px; line-height: 50px; font-size: 14px; border-bottom: 1px solid #dcdcdc; } .change_middle_choose{ padding: 15px; border-bottom: 1px solid #dcdcdc; } .change_middle_choose>li{ width:33.33%; margin-bottom: 20px; float: left; } .choose_classify{ width:90px; margin: 0 auto; border:1px solid #34a9e3; border-radius: 5px; } .choose_classify>p{ text-align: center; color: #34a9e3; } .choose_classify>p:first-child{ font-size:14px; line-height: 25px; } .choose_classify>p:last-child{ font-size:12px; line-height: 20px; } .change_middle_money{ padding: 5px 15px; } .change_middle_money>p{ font-size: 15px; line-height: 30px; } .change_middle_money>p:last-child{ color: #666666; } .choose_special{ color: #999999; text-decoration: line-through; margin-left: 20px; } .choose_range{ display: inline-block; width: 40px; height:20px; line-height: 20px; -webkit-border-radius:; -moz-border-radius:; border-radius:5px; background: #0194dc; color: #fff; font-size:12px; text-align: center; margin-right: 20px; } .change_btn{ position: fixed; margin: 0 auto; bottom: 20px; left:0; right:0; text-align: center; } .change_btn>button{ height:40px; width:80%; background:#0194dc; color: #fff; font-size:14px; border-radius:5px; border:none; } .bgColor{ background:#34a9e3; } .bgColor>p{ color: #fff; }
change.js
var change = new Vue({ el:'#change', data:function(){ return{ tel:'', chooseList:[ {classify:10,money:2.8,checked:false}, {classify:10,money:3.5,checked:false}, {classify:10,money:4.5,checked:false}, {classify:10,money:5.5,checked:false}, {classify:10,money:6.5,checked:false}, {classify:10,money:7.5,checked:false} ], nowPrice:2.5, prePrice:'3.00', range:'全国', provice:'', city:'', numOwer:'', fillIn:false, tab_index:0 } }, methods:{ ready:function(){ var this_obj = this; var tab_index = this_obj.tab_index; this_obj.chooseList[tab_index].checked = true; this_obj.nowPrice = this_obj.chooseList[tab_index].money; }, telNum:function(){ var this_obj = this; this_obj.fillIn = true; if(this_obj.tel == ''){ this_obj.fillIn = false; this_obj.provice = ''; } }, telBlur:function(){ var this_obj = this; var reg = /^1(3|4|5|7|8)\d{9}$/; if(this_obj.tel == ''){ this_obj.provice = ''; }else if(!reg.test(this_obj.tel)){ this_obj.provice = '请输入正确手机号'; $(".change_top_addre").css("color","red"); }else{ this_obj.provice = '北京-'; this_obj.city = '北京'; this_obj.numOwer = '移动'; } }, cancleNum:function(){ this.tel = ''; this.fillIn = false; this.provice = ''; this.city = ''; this.numOwer = ''; }, chooseRechange:function(index){ var this_obj = this; this_obj.nowPrice = this_obj.chooseList[index].money; for(var i = 0;i < this_obj.chooseList.length;i++){ this_obj.chooseList[i].checked = false; } this_obj.chooseList[index].checked = true; } } }) change.ready();
运行结果如图:
相关文章推荐
- HTML+TIME2,纯HTML实现页面动画效果。
- HTML页面表单输入框去掉鼠标选中后边框变色的效果
- html 锁定页面(js遮罩层弹出div效果)
- HTML页面过渡效果大全
- HTML 网页页面切换的各种变换效果
- (待测试) html 页面跳转效果(http-equiv 标签使用)
- java截取带html标签的字符串,再把标签补全(保证页面显示效果)
- 从0开始html前端页面开发_CSS实现图像获取鼠标焦点逐渐变大动画效果
- javascript html js仿LightBox内容显示效果,div覆盖层,锁定页面
- 第23节 html页面过渡效果
- html 锁定页面(js遮罩层弹出div效果)
- HTML+CSS3+JS 实现手风琴效果页面
- JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果
- 关于微信支付由H5页面修改为类似于微信支付手机充值的效果
- 关于html5与jsp页面同样的html代码展示的页面效果不一样的问题
- Flexslider图片轮播、文字图片相结合滑动切换效果HTML 首先在页面head部位载入jquery库文件和Flexslider插件,以及Flexslider所需的基本css样式文件。
- HTML浮动窗口与多媒体效果、表单与页面控件
- Html页面雪花效果的实现
- HTML中 css实现滚动页面时固定页面其中一栏的效果
- java截取带html标签的字符串,再把标签补全(保证页面显示效果)