常用功能总结

前言

总结一些在项目中经常会碰到的小功能！

1.实时计算输入字符数

需求：规定输入框输入的个数，并实时计算还剩余多少个字数可以输入

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script>
    <title>Title</title>
    <style>
        .input-box{
            line-height: 34px;
            font-size: 16px;
        }
        .input-field{
            width: 300px;
            height: 34px;
        }
    </style>
</head>
<body>
<div class="input-box">
    <input type="text" class="input-field" maxlength="35">
    <span class="left-word">还可以输入<b class="left-num">35</b>个字符</span>
</div>
<script>
    function calculateLeftWord(inputNum,totalNum) {
        return totalNum-inputNum;
    }
    $(".input-field").on("keyup",function () {
        var inputNum = $(this).val().length;
        if(calculateLeftWord(inputNum,35) >=0){
            $(this).parents(".input-box").find(".left-word .left-num").html(calculateLeftWord(inputNum,35));
        }
    })
</script>
</body>
</html>

maxlength属性的作用是：规定输入框最多可以输入的字符数，多于这个值，就不能继续输入。

2.全选

需求：当点击全选按钮时，所有checkbox选中;反之，所有checkBox未选中。

​ 当所有checkbox都被选中时，全选按钮自己呈现选中状态，否则，呈现未选中状态。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script>
    <title>Title</title>
</head>
<body>
<ul>
    <li>
        <input type="checkbox" class="checkbox"> 1
    </li>
    <li>
        <input type="checkbox" class="checkbox"> 2
    </li>
    <li>
        <input type="checkbox" class="checkbox"> 3
    </li>
    <li>
        <input type="checkbox" class="checkbox"> 4
    </li>
</ul>
<input type="checkbox" id="selectedAll">全选
<script>
    function selectedAll(){
        var checkbox = $(".checkbox");
        var checked = checkbox.filter(":checked");
        if(checkbox.length == checked.length){
            $("#selectedAll").prop("checked",true);
        }else{
            $("#selectedAll").prop("checked",false);
        }
    }
    $(function () {
        //        全选
        $(".checkbox").on("change",function () {
            selectedAll();
        })
        $("#selectedAll").on("change",function(){
            var checked = $(this).prop("checked"); // true / false
            $(".checkbox").prop("checked",checked);
            selectedAll();
        });
    })
</script>
</body>
</html>

3.聊天框

完整代码：

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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/normalize.css">
    <title>Title</title>
    <style>
        .send-message-popup{
            position: fixed;
            left: 50%;
            top: 50%;
            margin-top: -320px;
            margin-left: -250px;
            width: 500px;
            height: 640px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            background-color: #f2f2f2;
            border: solid 12px rgba(255,255,255,0.4);
            text-align: left;
            color: #323232;
        }
        .send-message-popup .send-message-title{
            position: relative;
            width: 100%;
            height: 40px;
            background-color: #dfdfdf;
            line-height: 40px;
            padding: 0 10px;
        }
        .send-message-main {
            overflow: hidden;
        }
        .chat-news-content{
            padding: 10px;
            height: 400px;
            width: 100%;
            overflow: auto;
        }
        .news-other-group, .news-self-group {
            padding: 6px;
            display: flex;
            display: -webkit-flex;
        }
        .news-other-group {
            justify-content: flex-start;
            -webkit-justify-content: flex-start;
        }
        .news-self-group {
            justify-content: flex-end;
            -webkit-justify-content: flex-end;
        }
        .self-msg, .other-msg {
            width: 80%;
            position: relative;
        }
        .self-msg {
            text-align: right;
        }
        .other-reply, .self-reply {
            display: inline-block;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: #fff;
            margin: 0 15px;
            line-height: 30px;
            padding: 5px 10px;
            word-wrap: break-word;
            max-width: 300px;
            white-space: pre-line;
        }
        .other-reply {
            text-align: left;
            box-shadow: 0 0 2px #ddd;
        }
        .self-reply {
            text-align: left;
            background-color: #ead66a;
            box-shadow: 0 0 2px #bbb;
        }
        .other-img, .self-img {
            width: 40px;
            height: 40px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }
        i.triangle-other, i.triangle-self {
            width: 0;
            height: 0;
            position: absolute;
            top: 12px;
            display: inline-block;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
        }
        i.triangle-other {
            left: 8px;
            border-right: 8px solid #fff;
        }
        i.triangle-self {
            right: 8px;
            border-left: 8px solid #ead66a;
        }
        .send-message-main .chat-input{
            padding: 0 10px 10px;
        }
        .chat-input .chat-input-field{
            border-top: 1px solid #ccc;
        }
        .chat-input-field .input-field-box{
            width: 100%;
            height: 82px;
            margin-left: auto;
            margin-right: auto;
            padding: 10px;
            outline: 0;
            font-size: 16px;
            line-height: 26px;
            word-wrap: break-word;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .chat-input-operate{
            margin: 10px 0;
        }
        .chat-input-operate-btn{
            float: right;
        }
        .chat-input-emoji{
            display: inline-block;
            cursor: pointer;
            padding: 0 10px;
            vertical-align: middle;
        }
        .chat-input-emoji .chat-input-emoji-icon{
            display: inline-block;
            width: 32px;
            height: 32px;
            background: url("images/emoji.png") no-repeat center;
            -webkit-background-size: 32px 32px;
            background-size: 32px 32px;
            vertical-align: middle;
            margin-top: -6px;
        }
        .chat-input-btn{
            display: inline-block;
            width: 62px;
            height: 30px;
            line-height: 26px;
            background-color: blue;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px 1px rgba(254,254,254,.75);
            -moz-box-shadow: inset 0 0 5px 1px rgba(254,254,254,.75);
            box-shadow: inset 0 0 5px 1px rgba(254,254,254,.75);
            border: solid 2px rgba(47,102,161,.89);
            background-color: #4492d6;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }
        /*解决IE浏览器隐藏滚动条的问题*/
        .input-field-box {
            -ms-overflow-style:none;
            overflow:-moz-scrollbars-none;
        }
        .input-field-box::-webkit-scrollbar{width:0px}
    </style>
</head>
<body>
<div class="send-message-popup" id="sendMessagePopup">
    <div class="send-message-title">
        <span class="ellipsis">正在与娜娜聊天中……</span>
        <span class="friend-status">【离线】</span>
    </div>
    <div class="send-message-main">
        <div class="chat-news-content">
            <div class="news-self-group">
                <div class="self-msg">
                    <span class="self-reply">你现在在干嘛</span>
                    <i class="triangle-self"></i>
                </div>
                <a href="javascript: void(0);">
                    <img class="self-img" src="images/author-avatar.png"/>
                </a>
            </div>
            <div class="news-other-group">
                <a href="javascript: void(0);">
                    <img class="other-img" src="images/live-avatar.png"/>
                </a>
                <div class="other-msg">
                    <i class="triangle-other"></i>
                    <span class="other-reply">工作呢，你最近咋样?</span>
                </div>
            </div>
            <div class="news-self-group">
                <div class="self-msg">
                    <span class="self-reply">挺好的</span>
                    <i class="triangle-self"></i>
                </div>
                <a href="javascript: void(0);">
                    <img class="self-img" src="images/author-avatar.png"/>
                </a>
            </div>
        </div>
        <div class="chat-input">
            <div class="chat-input-field">
                <div class="input-field-box" contenteditable="true"></div>
            </div>
            <div class="chat-input-operate clearfix">
                <div class="chat-input-operate-btn">
                    <div class="chat-input-emoji">
                        <i class="chat-input-emoji-icon"></i>
                    </div>
                    <div class="chat-input-btn">发表</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
    $(function () {
        $(".chat-input-btn").on("click",function () {
            var inputSelfVal = $(".input-field-box").html();
            if(inputSelfVal != ''){
                var cloneSelfGroup = '<div class="news-self-group">' +
                    '        <div class="self-msg">' +
                    '            <span class="self-reply">'+inputSelfVal+'</span>' +
                    '            <i class="triangle-self"></i>' +
                    '        </div>' +
                    '        <img class="self-img" src="images/author-avatar.png"/>' +
                    '    </div>';
                $(".chat-news-content").append(cloneSelfGroup);
                $(".input-field-box").html("");
            }
//                如何让发送的新消息最新显示
            var chatNewsContent = $('.chat-news-content');
            chatNewsContent[0].scrollTop = chatNewsContent[0].scrollHeight;
        })
    })
</script>
</body>
</html>

注意：Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。它是经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异，总结出来的最终结果。

4.消息提示动画：闪烁

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-2.2.3.min.js"></script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    $(function () {
        //        闪动效果
        setInterval(litSlash,500);
        function litSlash(){
            $(".box").animate(
                {opacity:"0"},250); //改变不透明度
            $(".box").animate(
                {opacity:"1"},498);
        }
    })
</script>
</body>
</html>

5.回到顶部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function gotop(ele){
       $(document).scroll(function(){
           if($(document).scrollTop()< 500){
               ele.fadeOut('fast');
           }else{
               ele.fadeIn('fast');
           }
       });

       ele.click(function(){
           $('body,html').animate({
               scrollTop:0
           },500)
       })
   }
   gotop($('.mm-backToTop'));

6.弹框

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
    <title>Title</title>
    <style>
        .btn{
            display: block;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #000;
            cursor: pointer;
        }
        .dialog{
            position: fixed;
            display: none;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.2);
            z-index: 99;
        }
        .dialog-box{
            position: absolute;
            left: 0;
            right: 0;
            top: 100px;
            margin: 0 auto;
            width: 500px;
            background: #ffffff;
            z-index: 999;
            border: 1px solid rgba(0,0,0,.2);
            border-radius: 6px;
            outline: 0;
            -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
            box-shadow: 0 3px 9px rgba(0,0,0,.5);
        }
        .dialog-box-header{
            position: relative;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            padding: 10px;
            line-height: 30px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-bottom: 1px solid #e5e5e5;
        }
        .close-dialog{
            position: absolute;
            right: 0;
            top: 5px;
            padding: 0 20px;
            cursor: pointer;
        }
        .dialog-box-content{
            text-align: center;
            font-size: 16px;
            line-height: 30px;
            padding: 20px;
        }
        .dialog-box-footer{
            width: 100%;
            height: 50px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-top: 1px solid #e5e5e5;
        }
        .confirm-btn{
            float: right;
            margin: 10px;
            padding: 5px 20px;
            text-decoration: none;
            color: #333;
            background-color: #fff;
            border:1px solid #ccc;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }
        .confirm-btn:hover{
            color: #333;
            background-color: #e6e6e6;
            border-color: #adadad;
        }
    </style>
</head>
<body>
    <div class="btn">打开弹框</div>
    <div class="dialog">
        <div class="dialog-box" id="dialogBox">
            <div class="dialog-box-header">
                <span>提示</span>
                <span class="close-dialog">x</span>
            </div>
            <div class="dialog-box-content">
                <span>报名成功，是否预定酒店？</span>
            </div>
            <div class="dialog-box-footer">
                <a href="https://www.baidu.com/" class="confirm-btn">是</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $(".btn").on("click",function () {
                $(".dialog").show();
                return false;
            })
            $(".close-dialog").on("click",function () {
                $(".dialog").hide();
            })
            $(document).bind('click', function(e) {
                var elem = e.target || e.srcElement;
                while (elem) {
                    if (elem.id && elem.id == 'dialogBox') {
                        return;
                    }
                    elem = elem.parentNode;
                }
                $(".dialog").hide();
            });
        })
    </script>
</body>
</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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript">
        (function () {
            function initFont() {
                document.getElementById('viewport').setAttribute('content','width=device-width,initial-scale=1,user-scalable=no,width=750,maximum-scale='+window.screen.width/750);
                document.documentElement.style.fontSize = (document.documentElement.clientWidth > 750 ? 750 : document.documentElement.clientWidth) / 7.5 + "px";
            }
            initFont();
            window.onresize=function(){initFont()};
        })(window);
    </script>
    <title>Title</title>
    <style>
        .btn{
            padding: 0.2rem;
            font-size: 0.24rem;
            text-align: center;
            border: 1px solid #000;
            cursor: pointer;
        }
        .volt-dialog{
            position: fixed;
            display: none;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.2);
            z-index: 999999;
        }
        .volt-dialog-box{
            position: relative;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            width: 80%;
            background: #ffffff;
            z-index: 999;
            border: 1px solid rgba(0,0,0,.2);
            -webkit-border-radius: 0.06rem;
            -moz-border-radius: 0.06rem;
            border-radius: 0.06rem;
            outline: 0;
            -webkit-box-shadow: 0 0.03rem 0.09rem rgba(0,0,0,.5);
            box-shadow: 0 0.03rem 0.09rem rgba(0,0,0,.5);
        }
        .volt-dialog-content{
            text-align: center;
            font-size: 0.24rem;
            line-height: 0.5rem;
            padding: 0.2rem;
        }
        .volt-dialog-footer{
            width: 100%;
            border-top: 1px solid #e5e5e5;
        }
        .volt-dialog-btn{
            float: right;
            margin: 0.1rem;
            padding: 0.1rem 0.3rem;
            text-decoration: none;
            -webkit-border-radius: 0.06rem;
            -moz-border-radius: 0.06rem;
            border-radius: 0.06rem;
            font-size: 0.24rem;
            line-height: 0.36rem;
        }
        .volt-confirm-btn{
            color: #fff;
            background-color: #337ab7;
            border-color: #2e6da4;
        }
        .volt-confirm-btn:hover{
            color: #fff;
            background-color: #286090;
            border-color: #204d74;
        }
        .volt-cancel-btn{
            color: #333;
            background-color: #fff;
            border:1px solid #ccc;
        }
        .volt-cancel-btn:hover{
            color: #333;
            background-color: #e6e6e6;
            border-color: #adadad;
        }
    </style>
</head>
<body>
<div class="btn">打开弹框</div>
<div class="volt-dialog">
    <div class="volt-dialog-box" id="dialogBox">
        <div class="volt-dialog-content">
            <span>报名成功，是否预定酒店？</span>
        </div>
        <div class="volt-dialog-footer clearfix">
            <button class="volt-dialog-btn volt-confirm-btn">确定</button>
            <button class="volt-dialog-btn volt-cancel-btn">取消</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $(".btn").on("click",function () {
            $(".volt-dialog").show();
            return false;
        })
        $(".volt-confirm-btn").on("click",function () {
            alert(1);
        })
        $(document).bind('click', function(e) {
            var elem = e.target || e.srcElement;
            while (elem) {
                if (elem.id && elem.id == 'dialogBox') {
                    return;
                }
                elem = elem.parentNode;
            }
            $(".volt-dialog").hide();
        });
        $(".volt-cancel-btn").on("click",function () {
            $(".volt-dialog").hide();
        })
    })
</script>
</body>
</html>

7.数字加减

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Title</title>
    <style>
        .clearfix::after,
        .clearfix::before {
            content: "";
            display: block;
            visibility: hidden;
            height: 0;
            line-height: 0;
            clear: both;
        }
        .clearfix {
            zoom: 1;
        }
        .float-left {
            float: left;
        }
        .quantity-operate {
            overflow: hidden;
        }
        .quantity-operate .min, .quantity-operate .add {
            width: 36px;
            height: 36px;
            line-height: 34px;
            background: #ededed;
            border: 1px solid #ccc;
            text-align: center;
            font-size: 24px;
        }
        .quantity-operate .add {
            margin-right: 10px;
        }
        .quantity-operate .min.unclick {
            color: #ccc;
            cursor: not-allowed;
            background-color: #ededed;
        }
        .quantity-number {
            width: 50px;
            height: 32px;
            background: #fff;
            border: 1px solid #ccc;
            border-left: none;
            border-right: none;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="quantity-operate clearfix">
    <input class="min float-left unclick" name="" type="button" value="-"/>
    <input class="quantity-number float-left" name="" type="text" value="1"/>
    <input class="add float-left" name="" type="button" value="+"/>
</div>
<script type="text/javascript">
    $(function () {
        //    商品数量变化
        $(".add").click(function () {
            var quantityNum = $(this).parents(".quantity-operate").find('.quantity-number');
            quantityNum.val(parseInt(quantityNum.val()) + 1);
            if (parseInt(quantityNum.val()) > 1) {
                $(this).parents(".quantity-operate").find('.min').removeClass("unclick");
            }
        })
        $(".min").click(function () {
            var quantityNum = $(this).parents(".quantity-operate").find('.quantity-number');
            quantityNum.val(parseInt(quantityNum.val()) - 1);
            if (parseInt(quantityNum.val()) <= 1) {
                $(this).addClass("unclick");
                quantityNum.val(1);
            }
        })

    })
</script>
</body>
</html>

8.点赞动画特效

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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点赞特效</title>
    <style>
        #btn{
            width: 100px;
            height: 42px;
            text-align: center;
            line-height: 42px;
            background: #e33340;
            color: #fff;
            cursor: pointer;
            margin: 100px;
        }
    </style>
</head>
<body>
<div id="btn">点赞</div>
<!--引入jQuery-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>　　　　
<script type="text/javascript">
    (function ($) {
        $.extend({
            tipsBox: function (options) {
                options = $.extend({
                    obj: null,  //jq对象，要在那个html标签上显示
                    str: "+1",  //字符串，要显示的内容;也可以传一段html，如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
                    startSize: "12px",  //动画开始的文字大小
                    endSize: "30px",    //动画结束的文字大小
                    interval: 600,  //动画时间间隔
                    color: "blue",    //文字颜色
                    callback: function () { }    //回调函数
                }, options);
                $("body").append("<span class='num'>" + options.str + "</span>");
                var box = $(".num");
                var left = options.obj.offset().left + options.obj.width() / 2;
                var top = options.obj.offset().top - options.obj.height()/2;
                box.css({
                    "position": "absolute",
                    "left": left + "px",
                    "top": top + "px",
                    "z-index": 9999,
                    "font-size": options.startSize,
                    "line-height": options.endSize,
                    "color": options.color
                });
                box.animate({
                    "font-size": options.endSize,
                    "opacity": "0",
                    "top": top - parseInt(options.endSize) + "px"
                }, options.interval, function () {
                    box.remove();
                    options.callback();
                });
            }
        });
    })(jQuery);

    function niceIn(prop){
        prop.find('i').addClass('niceIn');
        setTimeout(function(){
            prop.find('i').removeClass('niceIn');
        },1000);
    }
    $(function () {
        $("#btn").click(function () {
            $.tipsBox({
                obj: $(this),
                str: "+1",
                callback: function () {
                }
            });
            niceIn($(this));
        });
    });
</script>
</body>
</html>

效果如图所示：

9.移动端-输入验证码

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="js/remauto.js"></script>
    <title>更换手机号</title>
    <style>
        .input-qr-code {
            border-top: 1px solid #eee;
            padding: 1.5rem 0.8rem;
            color: #323232;
        }
        .qr-box .qr-input{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border: none;
            font-size: 18px;
            opacity: 0;
            z-index: 1;
            outline: none;
        }
        .fake-box{
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 1rem;
        }
        .iptbox{
            width: 0.8rem;
            height: 0.8rem;
            border:1px solid #ddd;
            font-size: 0.36rem;
            border-radius: 0.2rem;
            text-align: center;
        }
    </style>
</head>
<body>
<div class='input-qr-code'>
    <form action="#">
        <div class="qr-box">
            <input type="number" maxlength="6" class="qr-input" id="qr-input" autofocus="">
            <div class="fake-box">
                <input type="text" readonly="" class="iptbox">
                <input type="text" readonly="" class="iptbox">
                <input type="text" readonly="" class="iptbox">
                <input type="text" readonly="" class="iptbox">
                <input type="text" readonly="" class="iptbox">
                <input type="text" readonly="" class="iptbox">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    $(function () {
        $(".qr-input").on("input", function() {
            // trim(): 去两边空格的方法；
            var qrCode = $(this).val().trim();
            for (var i = 0; i < qrCode.length; i++) {
                $(".fake-box input").eq(i).val(qrCode[i]);
            }
            $(".fake-box input").each(function() {
                var index = $(this).index();
                if ( index >= qrCode.length ) {
                    $(this).val("");
                }
            });
            if (qrCode.length == 6) {
                //执行其他操作
                setTimeout(function () {
                    alert('订单已提交')
                },300)
            }
        });
    })
</script>
</body>
</html>

效果如下：

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Whittney <br>我就是我，不一眼的烟火！*_*<br><br>