常春岛资源网 Design By www.syssdc.com
Jquery+javascript动态生成支付网页数字键盘
制作网页支付界面的时候,数字键盘适配不同的屏幕宽高比是一个很麻烦的事,所以我制作了一个根据屏幕宽高动态生成的数字键盘
运行截图:
实现代码
html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <link rel="stylesheet" href="{{你的css文件路径}}" > <title>动态数字键盘</title> </head> <body> <div class="pay-top"> <img class="lklogo" src="/UploadFiles/2021-04-02/lianke.png">css
@CHARSET "UTF-8"; html,body{ background-color:#fff; } .pay-top{ position: absolute; width: 100%; height:60%; background: #fff; } .pay-shop-info { position: absolute; width: 90%; left:5%; text-align: right; top:3.4rem; font-size:0.3rem ; } .paymoneylogo { position: absolute; width: 90%; left:5%; top:4rem; height: 1.3rem; border-bottom: 0.02rem solid #bfbfbf; -webkit-border-radius: 0.02rem; -moz-border-radius: 0.02rem; border-radius: 0.02rem; background: #fff; } .inputlabel{ position: absolute; width: 90%; left:5%; top:4rem; height: 1.3rem; text-align: right; } .lklogo{ position: absolute; height: 1.2rem; width: 50%; left:25%; top:0.8rem; } .payinfo{ display:none; } .payinfo .paynum { font-size: 0.6rem; color: #424857; } .payinfo .payzero { font-size: 0.6rem; color: #424857; } table{ width:100%; height:50%; position:absolute; bottom:0; background-color:white; background-top:none; } table tr td{ text-align:center; width: 1.88rem; height: 1.26rem; font-family: "Microsoft YaHei"; font-weight: normal; border-right:1px solid #D9D9D9; border-top:1px solid #D9D9D9; } table tr td:active{ background-color:#ECECEC; } .keybord-return{ width: 1.88rem; height: 1.26rem; background:url(../img/keybord_return.png) no-repeat; background-size: 50% 50%; background-position: center; } .pay{ color:#fff; font-size:0.4rem; background-color:#0259a1; } .pay:active{ background-color: #004198; } .pay a{ display: block; position: relative; width: 100%; height: 100%; color: #fff; text-decoration: none; } .a-pay { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .pay-disabled { background-color: #0259a1; }附带上退格符,将其放项目的img文件中,否则数字键盘退格符无法显示:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
常春岛资源网 Design By www.syssdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
常春岛资源网 Design By www.syssdc.com
暂无评论...
更新日志
2024年06月03日
2024年06月03日
- 罗斯特洛波维奇、布里顿《舒伯特-阿佩乔尼奏鸣曲》1995[WAV+CUE]
- 群星《超高品质流行女声大碟 静听女人心 2CD》[WAV+CUE][1.3GB]
- BEYOND《无悔这一生 2023》 [WAV+CUE][690MB]
- 群星《30首最发烧经典老歌 情牵男人心 2CD》[WAV+CUE][1.4GB]
- 群星《不老的情歌-至尊版2CD》WAV分轨
- 岁月留声机群星《七十年代人金曲回顾》(黑胶)2CD[WAV分轨]
- 群星-世纪难忘金曲(迪安唱片)5CD[WAV]
- HenrietteFaure-DebussyEstampesPrludes,LivreI(MonoVersion)[FLAC]
- 吕方1992-弯弯十八首[香港][WAV+CUE]
- 经典歌曲珍藏专辑《民歌30年·真情依旧》3CD[WAV+CUE]
- 群星《时尚流行发烧极品 非同凡响 第一辑 2CD》[WAV/分轨][1.3GB]
- 陈曦《多年以后》HQⅡ头版限量编号[WAV+CUE][520MB]
- 孙露《用情 HQⅡ 2023》[WAV+CUE][380MB]
- 电影原声《速度与激情9电影原声大碟》2021[WAV+CUE]
- 【瑞鸣音乐】群星《伶歌》[XRCD2][WAV+CUE]