JS实现数字翻牌效果

最新推荐文章于 2025-10-12 17:12:27 发布

原创最新推荐文章于 2025-10-12 17:12:27 发布 · 1.4w 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#js

JS 专栏收录该内容

12 篇文章

订阅专栏

JS实现数字变化翻牌效果

一、效果图如下：

二、代码如下：

注意：需要引入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/

1、效果图：

1.1、初始效果

1.2、验证成功：

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">&gt;&gt;</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>

欢迎关注