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>
三、滑动验证效果(转)
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">>></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>
欢迎关注