JS实现数字翻牌效果

迷南。 2021-11-23 11:18 1918阅读 0赞

JS实现数字变化翻牌效果

### 一、效果图如下： ###

![20190727130422891.gif][]

### 二、代码如下： ###

注意：需要引入JQuery.js。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数字翻牌器</title>
        <script src="js/jquery.js" type="text/javascript"></script>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .doubler {
                width: 500px;
                height: 60px;
                float: left;
                border: 1px solid #cdcdcd;
                background-color: #fffcde;
                /* 调整显示位置，可随意修改*/
                margin: 50px 500px;
            }
            .number {
                height: 60px;
                overflow: hidden;
                margin: auto
            }
            .num {
                width: 45px;
                height: 60px;
                font-size: 60px;
                line-height: 60px
            }
    
            .li {
                width: 45px;
                float: left;
                color: #000
            }
    
            .comma {
                width: 20px;
                line-height: 60px;
                font-size: 60px;;
                color: #000;
                float: left
            }
    
            .describe {
                float: left;
                line-height: 14px;
                font-size: 14px;
                height: 14px;
                padding-top: 40px;
                width: 40px;
                color: #000;
            }
        </style>
    </head>
    <body>
    <div class="doubler">
        <div id="number" class="number"></div>
        <input type="hidden" id="hdnum" value="12345"/>
    </div>
    </body>
    
    <script>
        $(function () {
            // 初始化
            init();
            change();
            // 3秒中刷新一次
            setInterval("change()", 3000);
        });
    
        // 渲染页面
        function init() {
            var numStr = $("#hdnum").val();
            var numDiv = "<div class=\"num\">0</div>" +
                "<div class=\"num\">1</div>" +
                "<div class=\"num\">2</div>" +
                "<div class=\"num\">3</div>" +
                "<div class=\"num\">4</div>" +
                "<div class=\"num\">5</div>" +
                "<div class=\"num\">6</div>" +
                "<div class=\"num\">7</div>" +
                "<div class=\"num\">8</div>" +
                "<div class=\"num\">9</div>";
            var html = "";
            for (var i = 0; i < numStr.length; i++) {
                var len = numStr.length - i;
                var margin = 60 * parseInt(numStr[i]);
                html += "<div class=\"li\" style=\"margin-top:-" + margin + "px\">" + numDiv + "</div>";
                if (len % 3 == 1 && len > 3) {
                    html += "<div class=\"comma\">,</div>";
                }
            }
            html += "<div class=\"describe\">人次</div>";
            $("#number").html(html);
            $("#number").css("width", (numStr.length * 45 + Math.floor(numStr.length / 3) * 20 + 40) + "px");
        }
    
        // 数字翻牌
        function change() {
            // 随机生成一个五位数
            var num = parseInt(Math.random() * 100000);
            var numStr = num + "";
            if (numStr.length != $("div#number div.li").length) {
                $("#hdnum").val(num);
                init();
            } else {
                for (var i = 0; i < numStr.length; i++) {
                    var margin = 60 * parseInt(numStr[i]);
                    $("#number").find("div.li").eq(i).css({"margin-top": 0 - margin + "px", "transition": "margin-top 1s"});
                }
            }
            $("#hdnum").val(num);
        }
    </script>
    </html>

### 三、滑动验证效果（转） ###

原文：[http://www.jq22.com/][http_www.jq22.com]

**1、效果图：**

1.1、初始效果

![20190727131518720.png][]

1.2、 验证成功：

![20190727131631886.png][]

**2、代码：**

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>滑动验证</title>
    <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style>
    #slider {
    	margin:100px auto;
    	width:300px;
    	height:40px;
    	position:relative;
    	border-radius:2px;
    	background-color:#dae2d0;
    	overflow:hidden;
    	text-align:center;
    	user-select:none;
    	-moz-user-select:none;
    	-webkit-user-select:none
    }
    #slider_bg {
    	position:absolute;
    	left:0;
    	top:0;
    	height:100%;
    	background-color:#7ac23c;
    	z-index:1
    }
    #label {
    	width:46px;
    	position:absolute;
    	left:0;
    	top:0;
    	height:38px;
    	line-height:38px;
    	border:1px solid #ccc;
    	background:#fff;
    	z-index:3;
    	cursor:move;
    	color:#ff9e77;
    	font-size:16px;
    	font-weight:900
    }
    #labelTip {
    	position:absolute;
    	left:0;
    	width:100%;
    	height:100%;
    	font-size:13px;
    	font-family:microsoft yahei,serif;
    	color:#787878;
    	line-height:38px;
    	text-align:center;
    	z-index:2
    }
    </style>
    </head>
    <body>
    <div id="demo">
        <div id="slider">
            <div id="slider_bg"></div>
            <span id="label">>></span> <span id="labelTip">拖动滑块验证</span>
        </div>
    </div>
    
    <script>
    (function($, window, document, undefined) {
        function SliderUnlock(elm, options, success) {
            var me = this;
            var $elm = me.checkElm(elm) ? $(elm) : $;
            success = me.checkFn(success) ? success : function() {};
            var opts = {
                successLabelTip: "Successfully Verified",
                duration: 200,
                swipestart: false,
                min: 0,
                max: $elm.width(),
                index: 0,
                IsOk: false,
                lableIndex: 0
            };
            opts = $.extend(opts, options || {});
            me.elm = $elm;
            me.opts = opts;
            me.swipestart = opts.swipestart;
            me.min = opts.min;
            me.max = opts.max;
            me.index = opts.index;
            me.isOk = opts.isOk;
            me.labelWidth = me.elm.find('#label').width();
            me.sliderBg = me.elm.find('#slider_bg');
            me.lableIndex = opts.lableIndex;
            me.success = success;
        }
        SliderUnlock.prototype.init = function() {
            var me = this;
            me.updateView();
            me.elm.find("#label").on("mousedown", function(event) {
                var e = event || window.event;
                me.lableIndex = e.clientX - this.offsetLeft;
                me.handerIn();
            }).on("mousemove", function(event) {
                me.handerMove(event);
            }).on("mouseup", function(event) {
                me.handerOut();
            }).on("mouseout", function(event) {
                me.handerOut();
            }).on("touchstart", function(event) {
                var e = event || window.event;
                me.lableIndex = e.originalEvent.touches[0].pageX - this.offsetLeft;
                me.handerIn();
            }).on("touchmove", function(event) {
                me.handerMove(event, "mobile");
            }).on("touchend", function(event) {
                me.handerOut();
            });
        };
        SliderUnlock.prototype.handerIn = function() {
            var me = this;
            me.swipestart = true;
            me.min = 0;
            me.max = me.elm.width();
        };
        SliderUnlock.prototype.handerOut = function() {
            var me = this;
            me.swipestart = false;
            if (me.index < me.max) {
                me.reset();
            }
        };
        SliderUnlock.prototype.handerMove = function(event, type) {
            var me = this;
            if (me.swipestart) {
                event.preventDefault();
                event = event || window.event;
                if (type == "mobile") {
                    me.index = event.originalEvent.touches[0].pageX - me.lableIndex;
                } else {
                    me.index = event.clientX - me.lableIndex;
                }
                me.move();
            }
        };
        SliderUnlock.prototype.move = function() {
            var me = this;
            if ((me.index + me.labelWidth) >= me.max) {
                me.index = me.max - me.labelWidth - 2;
                me.swipestart = false;
                me.isOk = true;
            }
            if (me.index < 0) {
                me.index = me.min;
                me.isOk = false;
            }
            if (me.index + me.labelWidth + 2 == me.max && me.max > 0 && me.isOk) {
                $('#label').unbind().next('#labelTip').text(me.opts.successLabelTip).css({
                    'color': '#fff'
                });
                me.success();
            }
            me.updateView();
        };
        SliderUnlock.prototype.updateView = function() {
            var me = this;
            me.sliderBg.animate({
                'width': me.index
            }, 0);
            me.elm.find("#label").animate({
                "left": me.index + "px"
            }, 0)
        };
        SliderUnlock.prototype.reset = function() {
            var me = this;
            me.index = 0;
            me.sliderBg.animate({
                'width': 0
            }, me.opts.duration);
            me.elm.find("#label").animate({
                left: me.index
            }, me.opts.duration).next("#lableTip").animate({
                opacity: 1
            }, me.opts.duration);
            me.updateView();
        };
        SliderUnlock.prototype.checkElm = function(elm) {
            if ($(elm).length > 0) {
                return true;
            } else {
                throw "this element does not exist.";
            }
        };
        SliderUnlock.prototype.checkFn = function(fn) {
            if (typeof fn === "function") {
                return true;
            } else {
                throw "the param is not a function.";
            }
        };
        window['SliderUnlock'] = SliderUnlock;
    })(jQuery, window, document);
    
    $(function() {
        var slider = new SliderUnlock("#slider", {
            successLabelTip: "验证成功"
        }, function() {
            alert("验证成功");
        });
        slider.init();
    })
    </script>
    
    </body>
    </html>

**欢迎关注**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70][]

[20190727130422891.gif]: /images/20211122/6ce170e3d84b4034ad0a96e8b34aef9d.png
[http_www.jq22.com]: http://www.jq22.com/
[20190727131518720.png]: /images/20211122/03e195a1eaf44e66a4d2e317fc9adb65.png
[20190727131631886.png]: /images/20211122/4bc5ad8fd8564e3fad0172bfaa21bab6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70]: /images/20211122/b072524f4c8249d6ac5f9248217b3575.png