ホームページ > ウェブフロントエンド > jsチュートリアル > JSを使用してWeChat決済ポップアップ機能を実装する方法

JSを使用してWeChat決済ポップアップ機能を実装する方法

不言
リリース: 2018-06-26 09:35:07
オリジナル
2982 人が閲覧しました

この記事では主にWeChatの支払いポップアップウィンドウを模倣する機能を実装するためのJSを紹介します。コードはシンプルでわかりやすく、非常に優れており、必要な友人が参考にすることができます

を提供します。まずはレンダリングから

html コード

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

<!DOCTYPE html>

<html>

  <head>

    <title>仿手机微信支付输入密码界面效果</title>

    <meta charset="utf-8" />

    <meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />

    <link rel="stylesheet" type="text/css" href="css/rest.css" rel="external nofollow" />

  </head>

  <body>

    <!-- 打开弹窗按钮 -->

    <button id="myBtn">去支付</button>

    <!-- 弹窗 -->

    <p id="myModal" class="modal">

      <!-- 弹窗内容 -->

      <p class="modal-content">

        <p class="paymentArea">

          <p class="paymentArea-Entry">

            <p class="paymentArea-Entry-Head">

              <img src="images/xx_03.jpg" class="close" />

              <img src="images/jftc_03.png" class="useImg">

              <span class="tips-txt">请输入支付密码</span>

            </p>

            <p class="paymentArea-Entry-Content">

              <p class="pay-name">测试商品</p>

              <p class="pay-price">¥88.88</p>

            </p>

            <ul class="paymentArea-Entry-Row"></ul>

          </p>

          <p class="paymentArea-Keyboard">

            <h4>

              <img src="images/jftc_14.jpg" height="10" />

            </h4>

            <ul class="target">

              <li>

                <a>1</a>

                <a>2</a>

                <a>3</a>

              </li>

              <li>

                <a>4</a>

                <a>5</a>

                <a>6</a>

              </li>

              <li>

                <a>7</a>

                <a>8</a>

                <a>9</a>

              </li>

              <li>

                <a>清空</a>

                <a> 0 </a>

                <a>删除</a>

              </li>

            </ul>

          </p>

        </p>

      </p>

    </p>

  </body>

</html>

ログイン後にコピー

css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

body {

        margin: 0;

        padding: 0;

        font-size: 0.3rem;

        font-family: "微软雅黑", arial;

      }

      ul,

      li {

        margin: 0;

        padding: 0;

        list-style: none;

      }

      img {

        display: block;

      }

      #myBtn {

        display: block;

        width: 80%;

        height: auto;

        margin: 5rem auto;

        padding: 0.2rem;

        border-radius: 5px;

        border: 0;

        outline: none;

        font-family: "微软雅黑";

        color: #fff;

        background-color: #5CB85C;

      }

      /* 弹窗 */

      .modal {

        display: none;

        /* 默认隐藏 */

        position: fixed;

        z-index: 1;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        overflow: auto;

        background-color: rgb(0, 0, 0);

        background-color: rgba(0, 0, 0, 0.4);

        -webkit-animation-name: fadeIn;

        -webkit-animation-duration: 0.4s;

        animation-name: fadeIn;

        animation-duration: 0.4s

      }

      /* 弹窗内容 */

      .modal-content {

        position: fixed;

        bottom: 0;

        /*background-color: #fefefe;*/

        width: 100%;

        -webkit-animation-name: slideIn;

        -webkit-animation-duration: 0.4s;

        animation-name: slideIn;

        animation-duration: 0.4s

      }

      /**

       * 支付弹窗样式

       * **/

      .paymentArea-Entry {

        width: 90%;

        margin: 0 auto;

        padding-bottom: 0.3rem;

        background-color: #fff;

      }

      .paymentArea-Entry-Head {

        display: flex;

        display: -webkit-flex;

        height: 0.8rem;

        line-height: 0.8rem;

        padding: 0.2rem;

        border-bottom: 1px solid #5CB85C;

      }

      /* 关闭按钮 */

      .paymentArea-Entry-Head .close {

        width: 0.5rem;

        height: 0.5rem;

        padding: 0.15rem 0.15rem 0.15rem 0;

      }

      .paymentArea-Entry-Head .close:hover,

      .paymentArea-Entry-Head .close:focus {

        color: #000;

        text-decoration: none;

        cursor: pointer;

      }

      .paymentArea-Entry-Head .useImg {

        width: 0.8rem;

        height: 0.8rem;

        margin-right: 0.15rem;

      }

      .paymentArea-Entry-Head .tips-txt {

        font-size: 0.4rem;

      }

      .paymentArea-Entry-Content {

        position: relative;

        padding: 0.2rem 0;

        text-align: center;

      }

      .paymentArea-Entry-Content:after {

        content: "";

        position: absolute;

        bottom: 0;

        left: 0.3rem;

        right: 0.3rem;

        height: 1px;

        background-color: #ddd;

      }

      .paymentArea-Entry-Content .pay-name {

        font-size: 0.3rem;

      }

      .paymentArea-Entry-Content .pay-price {

        font-size: 0.4rem;

        font-weight: bold;

      }

      ul.paymentArea-Entry-Row {

        display: flex;

        display: -webkit-flex;

        justify-content: space-between;

        margin: 0.2rem 0.3rem 0 0.3rem;

        padding: 0;

        border: 1px solid #a2a2a2;

      }

      ul.paymentArea-Entry-Row li {

        position: relative;

        flex-grow: 1;

        min-width: 1rem;

        height: 0.8rem;

        line-height: 0.8rem;

        text-align: center;

        border-right: 1px solid #ddd;

      }

      ul.paymentArea-Entry-Row li:last-child {

        border-right: 0;

      }

      ul.paymentArea-Entry-Row li img {

        position: absolute;

        top: 50%;

        left: 50%;

        width: 0.5rem;

        height: 0.5rem;

        margin: -0.25rem 0 0 -0.25rem;

      }

      .paymentArea-Keyboard {

        margin-top: 1.2rem;

        background-color: #fff;

      }

      .paymentArea-Keyboard h4 {

        height: 0.5rem;

        line-height: 0.5rem;

        margin: 0;

        text-align: center;

      }

      .paymentArea-Keyboard h4 img {

        width: 0.93rem;

        height: 0.32rem;

        margin: 0 auto;

      }

      .paymentArea-Keyboard h4:active {

        background-color: #e3e3e3;

      }

      .paymentArea-Keyboard ul {

        border-top: 1px solid #ddd;

      }

      .paymentArea-Keyboard li {

        display: flex;

        display: -webkit-flex;

        justify-content: space-between;

        border-bottom: 1px solid #ddd;

      }

      .paymentArea-Keyboard li a {

        flex-grow: 1;

        display: block;

        min-width: 1rem;

        line-height: 1rem;

        border-right: 1px solid #ddd;

        font-size: 0.3rem;

        text-align: center;

        text-decoration: none;

        color: #000;

      }

      .paymentArea-Keyboard li:last-child,

      .paymentArea-Keyboard li a:last-child {

        border: 0;

      }

      .paymentArea-Keyboard li a:active {

        outline: none;

        background-color: #ddd;

      }

      /* 添加动画 */

      @-webkit-keyframes slideIn {

        from {

          bottom: -300px;

          opacity: 0

        }

        to {

          bottom: 0;

          opacity: 1

        }

      }

      @keyframes slideIn {

        from {

          bottom: -300px;

          opacity: 0

        }

        to {

          bottom: 0;

          opacity: 1

        }

      }

      @-webkit-keyframes fadeIn {

        from {

          opacity: 0

        }

        to {

          opacity: 1

        }

      }

      @keyframes fadeIn {

        from {

          opacity: 0

        }

        to {

          opacity: 1

        }

      }

ログイン後にコピー

js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

//定义根目录字体大小,通过rem实现适配

      document.addEventListener("DOMContentLoaded", function() {

        var html = document.documentElement;

        var windowWidth = html.clientWidth;

        //console.log(windowWidth)

        html.style.fontSize = windowWidth / 7.5 + "px";

      }, false);

      // 获取弹窗

      var modal = document.getElementById(&#39;myModal&#39;);

      // 打开弹窗的按钮对象

      var btn = document.getElementById("myBtn");

      // 获取 <span> 元素,用于关闭弹窗 that closes the modal

      var span = document.getElementsByClassName("close")[0];

      /*创建密码输入框*/

      var entryArea = document.querySelector(".paymentArea-Entry-Row");

      for(var i = 0; i < 6; i++) {

        var li = document.createElement("li");

        entryArea.appendChild(li);

      }

      /*键盘操作*/

      var doms = document.querySelectorAll(&#39;ul li a&#39;);

      var entryLis = document.querySelectorAll(".paymentArea-Entry-Row li");

      var pwds = ""; //存储密码

      var count = 0; //记录点击次数

      for(var i = 0; i < doms.length; i++) {

        ! function(dom, index) {

          dom.addEventListener(&#39;click&#39;, function() {

            var txt = this.innerHTML;

            switch(txt) {

              case "清空":

                if(count != 0) {

                  for(var i = 0; i < entryLis.length; i++) {

                    entryLis[i].innerHTML = "";

                  }

                  pwds = "";

                  count = 0;

                  console.log(pwds)

                  console.log(count)

                }

                break;

              case "删除":

                if(count != 0) {

                  console.log(pwds)

                  entryLis[count - 1].innerHTML = "";

                  pwds = pwds.substring(0, pwds.length - 1);

                  count--;

                  console.log(pwds)

                  console.log(count)

                }

                break;

              default:

                /*通过判断点击次数 向输入框填充内容*/

                if(count < 6) {

                  /*创建一个图片对象 插入到方框中*/

                  var img = new Image();

                  img.src = "images/dd_03.jpg";

                  entryLis[count].appendChild(img);

                  /*为存储密码的对象赋值*/

                  if(pwds == "") {

                    pwds = txt;

                  } else {

                    pwds += txt;

                  }

                  count++;

                  if(pwds.length == 6) {

                    location.href = "https://www.baidu.com";

                  }

                } else {

                  return;

                  alert("超出限制")

                }

            }

          });

        }(doms[i], i);

      }

      // 点击按钮打开弹窗

      btn.onclick = function() {

        modal.style.display = "block";

      }

      // 点击 <span> (x), 关闭弹窗

      span.onclick = function() {

        modal.style.display = "none";

        if(count != 0) {

          for(var i = 0; i < entryLis.length; i++) {

            entryLis[i].innerHTML = "";

          }

          pwds = "";

          count = 0;

        }

      }

      // 在用户点击其他地方时,关闭弹窗

      window.onclick = function(event) {

        if(event.target == modal) {

          modal.style.display = "none";

          if(count != 0) {

          for(var i = 0; i < entryLis.length; i++) {

            entryLis[i].innerHTML = "";

          }

          pwds = "";

          count = 0;

        }

        }

      }

      /*开关键盘*/

      var openKey = document.querySelector(".paymentArea-Entry-Row");

      var switchOfKey = document.querySelector(".paymentArea-Keyboard h4");

      switchOfKey.addEventListener(&#39;click&#39;, function() {

        var KeyboardH = document.querySelector(".paymentArea-Keyboard").clientHeight;

        document.querySelector(".paymentArea-Keyboard").style.height = KeyboardH + "px";

        document.querySelector(".paymentArea-Keyboard").style.backgroundColor = "transparent";

        document.querySelector(".paymentArea-Keyboard h4").style.display = "none";

        document.querySelector(".paymentArea-Keyboard ul").style.display = "none";

      })

      openKey.addEventListener(&#39;click&#39;, function() {

        document.querySelector(".paymentArea-Keyboard").style.backgroundColor = "#fff";

        document.querySelector(".paymentArea-Keyboard h4").style.display = "block";

        document.querySelector(".paymentArea-Keyboard ul").style.display = "block";

      })

ログイン後にコピー

上記がこの記事の全内容です参考になれば幸いですその他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

jsは、QQで連絡先を左にスライドさせて削除ボタンをスライドさせる操作を模倣します

JSを使用して、ページのスクロールに応じてウィンドウの固定位置要素を表示/非表示にします

以上がJSを使用してWeChat決済ポップアップ機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
ノード Js + JS 入力 = document.getElementById
から 1970-01-01 08:00:00
0
0
0
js addClassが機能しない
から 1970-01-01 08:00:00
0
0
0
javascript - jsコードをPythonに変換
から 1970-01-01 08:00:00
0
0
0
jsファイルのコードが見つかりません
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート