关闭

当前位置:首页 > 拆红包 » 正文

Javascript模拟拆红包效果

点击拆红包,抖动一会就出结果。

效果体验:


效果模拟红包,可以指定拆开后的“奖品”列表,拆开后显示随机抽取的奖品。可以多次抽奖。

扫描下面二维码也可以体验效果:

Javascript模拟拆红包效果



效果图如下:

Javascript模拟拆红包效果



代码如下:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>摇红包_何问起</title>
<link rel="stylesheet" href=http://hovertree.com/h/bjag/"http:/hovertree.com/texiao/js/37/css/csshake.min.css">
<link rel="stylesheet" href=http://hovertree.com/h/bjag/"http:/hovertree.com/texiao/js/37/css/style.css">
<script src=http://hovertree.com/h/bjag/"http:/hovertree.com/texiao/js/37/js/zepto.min.js"></script>
<script src=http://hovertree.com/h/bjag/"http:/hovertree.com/texiao/js/37/js/red.js"></script>
</head>
<body>
<!-- 红包 -->
<div class="red"><!-- shake-chunk -->
<span style="background-image: url();"></span>
<button class="redbutton" type="button" id="hovertreeOpen">拆红包</button>
<div class="red-jg">
<h1 id="hwqKey">何问起</h1>
<h5 id="hwqValue">我喜欢你!</h5>
</div>
</div>
<!-- End 红包 -->
<!-- 按钮 -->
<div class="t-btn">
<button id="hewenqiAgain">再抽一次</button>
</div>
<!-- End 按钮 -->

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>来源:<a href=http://hovertree.com/h/bjag/"http:/hovertree.com/" target="_blank">何问起</a> <a href=http://hovertree.com/h/bjag/"http:/hovertree.com/h/bjag/tqv7c2cw.htm" target="_blank">说明</a></p>
</div>
<script>
function hoverTreeRandom(n) {
return Math.floor(Math.random() * n + 1)
}
var hovertreePrize = new Array();
hovertreePrize[0] = { "key": "恭喜您:", "value": "获得88元代金卷!" };
hovertreePrize[1] = { "key": "恭喜您:", "value": "获得苹果八袋!" };
hovertreePrize[2] = { "key": "祝愿您:", "value": "新年快乐,大吉大利!" };
hovertreePrize[3] = { "key": "祝愿您:", "value": "笑口常开,天天开心!" };
hovertreePrize[4] = { "key": "祝愿您:", "value": "心想事成,美梦成真!" };
hovertreePrize[4] = { "key": "祝愿您:", "value": "事业顺利,财源滚滚!" };
var h_index = 0;
document.getElementById("hove"+"rtreeOpen").addEventListener("click", function () {
h_index = hoverTreeRandom(hovertreePrize.length)-1;
document.getElementById("hwqKey").innerText = hovertreePrize[h_index].key;
document.getElementById("hwqValue").innerText = hovertreePrize[h_index].value;
})
document.getElementById("hewenqiAgain").addEventListener("click", function () {
location = "";;
})
</script>
</body>
</html>源码下载:

另一个红包特效:

上一篇:推荐!京东天猫双11十一红包等你拆-天猫双11爆款清单会场
下一篇:红包多少才合适?
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

猜你喜欢


二维码