jquery实现手机端移动端手机号注册发送验证码倒计时效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery实现手机端移动端用户用手机号注册并发送获取验证码倒计时效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" 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"> <style> html,body { color: #333; margin: 0; height: 100%; font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: normal; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: none; color: #000; } a, label, button, input, select { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } img { border: 0; } body { background: #f7f7f7; color: #666; } html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td { margin: 0; padding: 0; } a { text-decoration: none; color: #08acee; } button { outline: 0; } img { border: 0; } button,input,optgroup,select,textarea { margin: 0; font: inherit; color: inherit; outline: none; } li { list-style: none; } a { color: #666; } .clearfix::after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { } /* 必要布局样式css */ .aui-flexView { width: 100%; height: 100%; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .aui-scrollView { width: 100%; height: 100%; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* position: relative; */ margin-bottom: -1px; } .aui-navBar { height: 44px; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: rgba(255, 255, 255, 0.98); } .aui-navBar-item { height: 44px; min-width: 25%; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; padding: 0 0.9rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 0.3rem; white-space: nowrap; overflow: hidden; color: #5C5C5C; position: relative; } .aui-navBar-item:first-child { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; margin-right: -25%; } .aui-navBar-item:last-child { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .aui-center { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 44px; width: 50%; margin-left: 25%; } .aui-center-title { text-align: center; width: 100%; white-space: nowrap; overflow: hidden; display: block; text-overflow: ellipsis; font-size: 0.95rem; color: #232326; } .icon { width: 20px; height: 20px; display: block; border: none; float: left; background-size: 20px; background-repeat: no-repeat; } .icon-return { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACU0lEQVRoQ93bzUobURQH8HPuBKRiVlKnbkofQF/Albhpo4JFfYC6aLstuDQJIfEpUhe+QKEYJ7hw0Ydo30BBzcJVhEJnTrkRIQkZnblzP86d2QSGnMz9zTlk8Z+5CB4cH1r374L47yEAvgWAKOqEXdVlo2qhrbqt1u0axnABCNWxa34/b4dfVNbAGvyIpUtAfDWNQ6qs9DqLf/Ki2YKfw0pkArDfb4c/SgF+CSuRpelwFiwRnEad8CBvd0c3SqXIVE0mLFA0FOHHXy38p7IONuDt+mAdMO7P+oN6glFBLJsOSyxhfIGIc2ld04FlAbaJdQ62jXUKdoF1BnaFdQJ2ibUOdo21CuaAtQbmgrUC5oQ1DuaGNQrmiDUG5oo1AuaM1Q7mjtUK9gGrDewLVgvYJ2xhsG/YQuBac/BZUNwd5YBIACQ/J1NBXbGMSliXVqMU4r3/NlgOFuJrIXCinugxB5UnOWKVO7xVvztCQcez7uIILag/xHBHNUrV2dHp31LqcK05aASQtNMWlgD2HsTr3dKA5UhXqskVIojUWJXgbBgs7XFDK3VYIjcbd58EJCeAGPiEVgZLZK1+sxEI6AHgvC/oQmAf0YXBvqG1gH1CawP7gtYK9gGtHcwdbQTMGW0MzBVtFMwRbRzMDW0FzAltDcwFbRXMAW0d7BrtBOwS7QzsCu0U7ALtHGwbzQJsE80GbAvNCpwDXY4XxJ+Sz0xpqKDVqPXmd96nFOw6nBVdqk0eWdCl2eQxPaKj8Ub8Ob5Riwi6USf8mnec5ffZjvQ4RudWvP+nvTpbhh+yxgAAAABJRU5ErkJggg=='); } .aui-code-box { padding: 10px 0; text-align: center; } .aui-code-box button { background: #4c7ee9; height: 45px; line-height: 45px; border: none; color: #fff; border-radius: 4px; width: 100%; font-size: 0.98rem; } .aui-code-box h2 { color: #333333; font-size: 1.4rem; font-weight: normal; } .aui-code-box p { color: #cccccc; font-size: 0.85rem; /* position: relative; */ width: 100%; background: #fff; /* padding-top: 10px; */ padding: 0 15px; } .aui-code-line { position: relative; } .aui-code-line:after { content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 1px; border-bottom: 1px solid #D9D9D9; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .aui-code-line-input { padding: 10px 0; height: 50px; width: 100%; font-size: 14px; background: none; border: none; color: #333; } .aui-btn-default { float: right; position: absolute; right: 0px; top: 39px; z-index: 10002; color: #4c7ee9; background: none; border: none; margin-top: -35px; width: 100px; height: 40px; } .aui-code-line em { position: absolute; left: 0; top: 17px; color: #333; font-style: normal; font-size: 14px; } .aui-code-btn { padding-top: 30px; margin: 0 15px; } .aui-code-box form { /* padding-top: 50px; */ position: relative; } .aui-code-line-clear span a { text-indent: -999px; } .aui-cell-che { position: absolute; width: 30px; overflow: hidden; left: 15px; } .aui-well-icon-checked:before { display: block; width: 18px; height: 18px; content: ' '; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAI4UlEQVRoQ92bDXBcVRWAz3mvIRvatEx/UtuOTlGgHSP+YEpjNNl37oIZGH9aoREdhcH6hz9VsWD9mZEZ0IrWHwRnUEcER0VDy4iUakxz79sSYoNxyqhRhCrqFGizlSKrxvzsO85Z3tt53Wyybze7SZYz0+km++4553v3vvvOPecEYQ6Ema3BwcElo6OjS23bXprJZJYz80RdXd0pZj6VyWROEdHkHLgCWA0jhw4dWjM5OdkGAK+Xf4h4AQAsKmLrKDP/BgCGEHGAiA5Xw7eKAXd3d9srV67cAgA7ELGjAs7+DQB+BAB3EtHRCujLqpg18OHDh5eOjo5ew8wCurZSjuXpMQDwZSL65Wz1zwrYdd13MPPXAOBFMznCzP9CxKeZ+SkAOI6I8j8y8xpEXAMAa/zPy4ro+aNlWbscx7m/XPCygLXWGwDgO9MtXWbOIOIhALjP87y9iUTiySgOJpPJs5l5CzNvZWZ59q1C45j57lgs9pG2trZnougNX1MysOu62zzP+yEinlHA2BFmvj0Wi+0tx5mwPmPMSgC4DAA+DADnF7B1kpm3K6V+Xgp0ScDGmM8DwA35Bph5ABE/S0RuKcajXqu1TgDAFxHxwgJjvkBEn4uqKxIwM6Prut8HgKvCipn5n4i4k4jujGqw3Ot8H94DAHsA4Kw8PXuI6LoouiMBa63leX1fnsIjnue9OerzGcWZKNf09/e/ZGJiYn+BZX4bEX20mI6iwFrrmxHx+ryZ7V69evW7m5ubx4sZqMb3Bw4cqG9oaLgbALbm+bVbKfWZmWzOCOy67tXMfEeegp+kUql3dXV1ZaoBE1WnMUYit+4C0Jcppe6dTs+0wFrrOAD0IaIdGrzPcZwuRPSiOlbN6yS6W7Vq1c8A4E0hO6MAcAERPVrIdkFg/5XweN7m0COK5yrIj3qjhoeHzxgZGTkIAO3BGGb+CyK2ENGz+XoKAmut70DEq0MXH5NNopCCqI5V8zp/gv4EAPLuzgozf10pdW1RYNd1NzHzw6ELGQA6iKi/mk7PVre8qxFRZjqQCQA4j4jkEJKTKTOstX4IEeVoF9ypW5VSO2br0FyM11p/DxHlXR3IPUTUNS2wbFSImIuWJNhHxA1E9O+5cHi2NowxEpDI3pNb2rZtb+7o6Mit2NNm2Bgjx6/OwDAi7nAc59bZOjKX47XW1yPizSGbe4loW44p+JBMJs/1PO+x0IUnm5qa1s1XcFHuTerv72+cmJj4R+gNI8/yWiI6KTpzM2yM2QkAXwkZ+hIRfbpcw/M5Tmt9i6zOkA+7iCg76zlgrbWLiBJsZMXzvPWJROLv8+l4uba11q9CxEeC8cycVEo5OeDe3t5ltm3LySeIqh4hoteUa3AhjNNaPyobru/L5Pj4+FmdnZ3/yc6wMeYiAOgN3ZGCL+2FABLVB2PM7QDwgdAGfKnjOL8IgD/pnzOD77cSkcSoNSt+vu3H+c9xFlhrfRciXhl8aVnWS+Px+BM1S/s8UzMi/iG0an+glLoqAB4M0ifMPKaUitUyrPju58nHgn1JwmWl1OZgSUt0co4P+TgRnVfrwP7KPYaI6+QzMz+mlNoQAKdC4dgQEW16gQAPI+LLfeCnlFLrAmBJ1dT5kIaI1AsB2BjzawBo9VnSRLQ0eIalMrDUvxMDSikpgtW8GGOOAMCrfZAUETUFMyw78nr/i98T0Strnvb5nfooIr7Mn8g/K6U2BjMsJcrX+pDHiUjqPTUvWuspKzcA7kHENwaEDQ0Ny1pbW5+rZeKDBw+utm37eIjhfiJ6S7Ckb/NrONnv8w/NtQheIJmRDZeDGX4nIkrxOSvM/DGl1DdrETTw2RizCwB2Bz8jYpfjOPcEMywbVjiU3EdEl9c48AEAuCTE8GIiOhZOAI.........完整代码请登录后点击上方下载按钮下载查看
网友评论0