Главная Обзор Помощь
Регистрация Вход
wxb
/
CloudSQLPay
Следить 1
В избранное 0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

commit

wxb 8 лет назад
Родитель
dadb83d706
Сommit
0434a512e6
7 измененных файлов с 510 добавлено и 0 удалено
Единый вид Показать статистику Diff
  1. 145 0
      alipay.css
  2. 56 0
      alipay.html
  3. BIN
      alipay.jpg
  4. 56 0
      index.html
  5. 144 0
      wechat.css
  6. BIN
      wechat.jpg
  7. 109 0
      wechat.js

+ 145 - 0
alipay.css
Просмотреть файл 

@@ -0,0 +1,145 @@
 
+.box{
 
+    width:100%;
 
+}
 
+.header{
 
+    width: 100%;
 
+}
 
+.header img{
 
+    width:100%;
 
+}
 
+.title{
 
+    width:100%;
 
+    text-align: center;
 
+    color:rgb(0,161,236);
 
+    font-size: 1.5rem;
 
+    margin-top: 3vh;
 
+    font-weight: bold;
 
+}
 
+.moneyDiv{
 
+    border-bottom: 0.1vw black  solid;
 
+    margin: 3.5vh auto;
 
+    width: 85%;
 
+}
 
+.money{
 
+    margin-top: 3vh;
 
+}
 
+.amount{
 
+    color:#6CA6CD;
 
+    margin-left:1vw;
 
+}
 
+.type{
 
+    float:left;
 
+    font-size: 2rem;
 
+}
 
+.moneyInput{
 
+    height: 3rem;
 
+}
 
+.moneyInput input{
 
+    border:0;
 
+    width: 85%;
 
+    height: 2.5rem;
 
+    font-size: 2rem;
 
+}
 
+.footer{
 
+    width:100%;
 
+    height:30%;
 
+    position:fixed;
 
+    bottom:0;
 
+    left:0;
 
+}
 
+.firstSpan{
 
+    width:100%;
 
+}
 
+.firstNumber{
 
+    background:rgb(245,245,245);
 
+    width:24.8%;
 
+    height:19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float:left;
 
+    border: 0.1vw grey solid;
 
+}
 
+.Number{
 
+    background:rgb(245,245,245);
 
+    width:24.9%;
 
+    height:19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float:left;
 
+    border-right: 0.1vw grey solid;
 
+    border-bottom:0.1vw grey solid;
 
+    border-top:0.1vw grey solid;
 
+}
 
+.secondSpan{
 
+    width:100%;
 
+}
 
+.secondNumFirst{
 
+    background: rgb(245,245,245);
 
+    width: 24.9%;
 
+    height: 19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float: left;
 
+    border-right: 0.1vw grey solid;
 
+    border-bottom: 0.1vw grey solid;
 
+    border-left: 0.1vw grey solid;
 
+}
 
+.secondNum{
 
+    background: rgb(245,245,245);
 
+    width: 24.8%;
 
+    height: 19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float: left;
 
+    border-right: 0.1vw grey solid;
 
+    border-bottom: 0.1vw grey solid;
 
+}
 
+.thirdSpan{
 
+    width:100%;
 
+}
 
+.fourthSpan{
 
+    width:100%;
 
+}
 
+.sub{
 
+    background: rgb(86,171,228);
 
+    width: 25%;
 
+    height: 19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float: left;
 
+    border-right: 0.1vw grey solid;
 
+    border-bottom: 0.1vw rgb(86,171,228) solid;
 
+    color:white;
 
+}
 
+.zero{
 
+    background: rgb(245,245,245);
 
+    width: 49.8%;
 
+    height: 19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float: left;
 
+    border-left: 0.1vw grey solid;
 
+    border-right: 0.1vw grey solid;
 
+    border-bottom: 0.1vw grey solid;
 
+}
 
+.bottomsub{
 
+    background: rgb(86,171,228);
 
+    width: 25%;
 
+    height: 19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float: left;
 
+    border-right: 0.1vw grey solid;
 
+    border-bottom: 0.1vw grey solid;
 
+}
 
+@media screen and (max-width:320px){
 
+    .header>img{
 
+        width: 100%;
 
+    }
 
+}
 
+@media screen and (min-width:568px){
 
+    .header>img{
 
+        height:0;
 
+    }
 
+}
 
+input { pointer-events: none; }

+ 56 - 0
alipay.html
Просмотреть файл 

@@ -0,0 +1,56 @@
 
+<html>
 
+<head>
 
+<title>
 
+        CloudSQL支付宝
 
+</title>
 
+<meta charset="utf-8"/>
 
+<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 
+<link rel="stylesheet" type="text/css"  href="alipay.css">
 
+</head>
 
+<body>
 
+<script type="text/javascript" src="wechat.js"></script>
 
+<div class="box">
 
+    <div class="header">
 
+        <img src="alipay.jpg"/>
 
+    </div>
 
+    <div class="title">CloudSQL支付宝支付</div>
 
+    <div class="moneyDiv">
 
+        <div class="amount">付款金额</div>
 
+        <div class="money">
 
+            <div class="type">￥</div>
 
+            <div class="moneyInput">
 
+                <input type="text" autofocus="autofocus" pattern="[0-9]*"/>
 
+            </div>
 
+            </div>
 
+        </div>
 
+    <div class="footer">
 
+        <div class="firstSpan">
 
+            <div class="firstNumber">1</div>
 
+            <div class="Number">2</div>
 
+            <div class="Number">3</div>
 
+            <div class="Number">X</div>
 
+        </div>
 
+        <div class="secondSpan">
 
+            <div class="secondNumFirst">4</div>
 
+            <div class="secondNum">5</div>
 
+            <div class="secondNum">6</div>
 
+            <div class="sub"></div>
 
+        </div>
 
+        <div class="thirdSpan">
 
+            <div class="secondNumFirst">7</div>
 
+            <div class="secondNum">8</div>
 
+            <div class="secondNum">9</div>
 
+            <div class="sub">确定</div>
 
+        </div>
 
+        <div class="fourthSpan">
 
+            <div class="zero">0</div>
 
+            <div class="secondNum">.</div>
 
+            <div class="bottomsub"></div>
 
+        </div>
 
+    </div>
 
+</div>
 
+</body>
 
+</html>
 
+<script type="text/javascript">
 
+    firstSpan();
 
+</script>

BIN
alipay.jpg
Просмотреть файл


+ 56 - 0
index.html
Просмотреть файл 

@@ -0,0 +1,56 @@
 
+<html>
 
+<head>
 
+<title>
 
+        CloudSQL微信支付
 
+</title>
 
+<meta charset="utf-8"/>
 
+<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 
+<link rel="stylesheet" type="text/css"  href="wechat.css">
 
+</head>
 
+<body>
 
+    <script type="text/javascript" src="wechat.js"></script>
 
+<div class="box">
 
+    <div class="header">
 
+        <img src="wechat.jpg"/>
 
+    </div>
 
+    <div class="title">CloudSQL微信支付</div>
 
+    <div class="moneyDiv">
 
+        <div class="amount">付款金额</div>
 
+        <div class="money">
 
+            <div class="type">￥</div>
 
+            <div class="moneyInput">
 
+                <input type="text" autofocus="autofocus" pattern="[0-9]*"/>
 
+            </div>
 
+            </div>
 
+        </div>
 
+    <div class="footer">
 
+        <div class="firstSpan">
 
+            <div class="firstNumber">1</div>
 
+            <div class="Number">2</div>
 
+            <div class="Number">3</div>
 
+            <div class="Number">X</div>
 
+        </div>
 
+        <div class="secondSpan">
 
+            <div class="secondNumFirst">4</div>
 
+            <div class="secondNum">5</div>
 
+            <div class="secondNum">6</div>
 
+            <div class="sub"></div>
 
+        </div>
 
+        <div class="thirdSpan">
 
+            <div class="secondNumFirst">7</div>
 
+            <div class="secondNum">8</div>
 
+            <div class="secondNum">9</div>
 
+            <div class="sub">确定</div>
 
+        </div>
 
+        <div class="fourthSpan">
 
+            <div class="zero">0</div>
 
+            <div class="secondNum">.</div>
 
+            <div class="bottomsub"></div>
 
+        </div>
 
+    </div>
 
+</div>
 
+</body>
 
+</html>
 
+<script type="text/javascript">
 
+    firstSpan();
 
+</script>

+ 144 - 0
wechat.css
Просмотреть файл 

@@ -0,0 +1,144 @@
 
+.box{
 
+    width:100%;
 
+}
 
+.header{
 
+    width: 100%;
 
+}
 
+.header img{
 
+    width:100%;
 
+}
 
+.title{
 
+    width:100%;
 
+    text-align: center;
 
+    color:black;
 
+    font-size: 1.5rem;
 
+    margin-top: 3vh;
 
+    font-weight: bold;
 
+}
 
+.moneyDiv{
 
+    border-bottom: 0.1vw black solid;
 
+    margin: 3.5vh auto;
 
+    width: 85%;
 
+}
 
+.money{
 
+    margin-top: 3vh;
 
+}
 
+.amount{
 
+    color:grey;
 
+    margin-left:1vw;
 
+}
 
+.type{
 
+    float:left;
 
+    font-size: 2rem;
 
+}
 
+.moneyInput{
 
+    height: 3rem;
 
+}
 
+.moneyInput input{
 
+    border:0;
 
+    width: 85%;
 
+    height: 2.5rem;
 
+    font-size: 2rem;
 
+}
 
+.footer{
 
+    width:100%;
 
+    height:30%;
 
+    position:fixed;
 
+    bottom:0;
 
+    left:0;
 
+}
 
+.firstSpan{
 
+    width:100%;
 
+}
 
+.firstNumber{
 
+    background:rgb(245,245,245);
 
+    width:24.8%;
 
+    height:19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float:left;
 
+    border: 0.1vw grey solid;
 
+}
 
+.Number{
 
+    background:rgb(245,245,245);
 
+    width:24.6%;
 
+    height:19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float:left;
 
+    border-right: 0.1vw grey solid;
 
+    border-bottom:0.1vw grey solid;
 
+    border-top:0.1vw grey solid;
 
+}
 
+.secondSpan{
 
+    width:100%;
 
+}
 
+.secondNumFirst{
 
+    background: rgb(245,245,245);
 
+    width: 24.8%;
 
+    height: 19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float: left;
 
+    border-right: 0.1vw grey solid;
 
+    border-bottom: 0.1vw grey solid;
 
+    border-left: 0.1vw grey solid;
 
+}
 
+.secondNum{
 
+    background: rgb(245,245,245);
 
+    width: 24.6%;
 
+    height: 19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float: left;
 
+    border-right: 0.1vw grey solid;
 
+    border-bottom: 0.1vw grey solid;
 
+}
 
+.thirdSpan{
 
+    width:100%;
 
+}
 
+.fourthSpan{
 
+    width:100%;
 
+}
 
+.sub{
 
+    background: rgb(190,216,189);
 
+    width: 24.6%;
 
+    height: 19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float: left;
 
+    border-right: 0.1vw grey solid;
 
+    border-bottom: 0.1vw rgb(190,216,189) solid;
 
+}
 
+.zero{
 
+    background: rgb(245,245,245);
 
+    width: 49.7%;
 
+    height: 19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float: left;
 
+    border-left: 0.1vw grey solid;
 
+    border-right: 0.1vw grey solid;
 
+    border-bottom: 0.1vw grey solid;
 
+}
 
+.bottomsub{
 
+    background: rgb(190,216,189);
 
+    width: 24.6%;
 
+    height: 19.2%;
 
+    text-align: center;
 
+    padding-top: 3.2%;
 
+    float: left;
 
+    border-right: 0.1vw grey solid;
 
+    border-bottom: 0.1vw grey solid;
 
+}
 
+@media screen and (max-width:320px){
 
+    .header>img{
 
+        width: 100%;
 
+    }
 
+}
 
+@media screen and (min-width:568px){
 
+    .header>img{
 
+        height:0;
 
+    }
 
+}
 
+input { pointer-events: none; }

BIN
wechat.jpg
Просмотреть файл


+ 109 - 0
wechat.js
Просмотреть файл 

@@ -0,0 +1,109 @@
 
+window.onload=function(){
 
+    if(asny()){
 
+        return;
 
+    }else if(asny()=='none'){
 
+        return;
 
+    }
 
+    else{
 
+        window.location.href="alipay.html";
 
+        return;
 
+    }
 
+}
 
+function asny(){
 
+    if (/MicroMessenger/.test(window.navigator.userAgent)) { 
+        return true; 
+    } else if (/AlipayClient/.test(window.navigator.userAgent)) { 
+        return false;
 
+    }else{
 
+        return 'none';
 
+    }
 
+}
 
+function firstSpan(){
 
+        var moneyInput=document.getElementsByClassName("moneyInput")[0];
 
+        var number=moneyInput.querySelector("input");
 
+        var first=document.getElementsByClassName("firstSpan")[0].children,
 
+            second=document.getElementsByClassName("secondSpan")[0].children,
 
+            third=document.getElementsByClassName("thirdSpan")[0].children,
 
+            fourth=document.getElementsByClassName("fourthSpan")[0].children;
 
+        var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
 
+        for(var i=0;i<first.length;i++){
 
+            (function(i){
 
+                //console.log(first[i]);
 
+                first[i].onclick=function(){
 
+                    console.log(first[i].innerHTML);
 
+                    if(i<first.length-1){
 
+                        number.value+=first[i].innerHTML;
 
+                        if(reg.test(number.value)){
 
+                            number.value=number.value;
 
+                        }else{
 
+                            number.value=number.value.substring(0,number.value.length-1);
 
+                        }
 
+                        
+                    }else{
 
+                        number.value=number.value.substring(0,number.value.length-1);
 
+                    }
 
+                }
 
+            })(i)
 
+        }
 
+
 
+        for(var i=0;i<second.length;i++){
 
+            (function(i){
 
+                //console.log(first[i]);
 
+                second[i].onclick=function(){
 
+                    console.log(second[i].innerHTML);
 
+                    if(i<second.length-1){
 
+                        number.value+=second[i].innerHTML;
 
+                        if(reg.test(number.value)){
 
+                            number.value=number.value;
 
+                        }else{
 
+                            number.value=number.value.substring(0,number.value.length-1);
 
+                        }
 
+                    }else{
 
+                        console.log("don't touch me hentai!");
 
+                    }
 
+                }
 
+            })(i)
 
+        }
 
+
 
+        for(var i=0;i<third.length;i++){
 
+            (function(i){
 
+                //console.log(third[i]);
 
+                third[i].onclick=function(){
 
+                    console.log(third[i].innerHTML);
 
+                    if(i<third.length-1){
 
+                        number.value+=third[i].innerHTML;
 
+                        if(reg.test(number.value)){
 
+                            number.value=number.value;
 
+                        }else{
 
+                            number.value=number.value.substring(0,number.value.length-1);
 
+                        }
 
+                    }else{
 
+                        console.log("don't touch me hentai!");
 
+                    }
 
+                }
 
+            })(i)
 
+        }
 
+
 
+        for(var i=0;i<fourth.length;i++){
 
+            (function(i){
 
+                //console.log(first[i]);
 
+                fourth[i].onclick=function(){
 
+                    console.log(fourth[i].innerHTML);
 
+                    if(i<fourth.length-1){
 
+                        if(number.value.indexOf(".")==-1){
 
+                            if(reg.test(number.value)){
 
+                                number.value+=fourth[i].innerHTML;
 
+                            }else{
 
+                                number.value=number.value;
 
+                            }
 
+                        }else{
 
+                            number.value=number.value;
 
+                        }
 
+                        
+                    }else{
 
+                        console.log("don't touch me hentai!");
 
+                    }
 
+                }
 
+            })(i)
 
+        }
 
+    }