jQuery隨機抽獎代碼
編輯：JQuery特效代碼
體驗效果：http://hovertree.com/texiao/jquerytree/3/
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery隨機抽獎 - 何問起</title><base target="_blank"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /><style>.mainHovertree,.beginHovertree,.endHovertree{width:30px;height:30px;
border:solid silver 1px;display:inline-block;margin-left:5px;
border-radius: 60px;padding: 30px 30px;}
.mainHovertree{background-color:red}#resultHovertree{width:100px;height:100px;background-repeat:no-repeat}
a{color:blue}
</style>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
<h2>隨機抽獎</h2>
<div class="beginHovertree"></div><div class="endHovertree"></div><div class="mainHovertree"></div>
<br />
<br /><input type="button" id="startHovertree" value="開始" />
<input type="button" id="stopHovertree" value="停止" style="display:none" />
<input type="button" id="replayHovertree" value="再來" style="display:none" />
<br />
<div id="resultHovertree"></div>第三個圓的顏色會自動改變。<br />
點擊開始按鈕，第一個圓會獲取第三個圓當時的顏色，並且第三個圓隱藏；
<br />點擊停止按鈕，第三個圓會慢慢出現，當完全顯示時的顏色賦給第二個圓。
<br />如果第一個和第二個圓顏色相同就中獎，否則沒中獎。
<br /><br /><br />
<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/jquery/8.htm">demo 1</a> <a href="http://hovertree.com/h/bjae/css3circle.htm">畫圓</a> <a href="http://hovertree.com/h/bjae/bgbv6iy5.htm">原文</a>
<br />
本實踐實用的jquery函數有toggle() ,show(),hide(),.css()等。
</div>
<script>
$(document).ready(function () {
var int = self.setInterval("colorHoverTree()", 400)
$("#startHovertr" + "ee").on("click", function () {
$("#startHovertre" + "e").hide();
$(".beginHover" + "tree").css("background-color", $(".mainHo" + "vertree").css("background-color"));
$(".mainHo" + "vertree").toggle();
$("#stopHov" + "ertree").show();
})
$("#stopHovertree").on("click", function () {
$("#stopHovertr" + "ee").hide();
$(".mainH" + "overtree").toggle(2000, function () {
$(".endHovertre" + "e").css("background-color", $(".mainHovert" + "ree").css("background-color"));
if (($(".beginHo" + "vertree").css("background-color")) == ($(".endHovertree").css("background-color")))
{ $("#resultHovertree").css("background-image", "url(images/zjhovertree.gif)") }
else { $("#resultHov" + "ertree").css("background-image", "url(images/nohovertrees.jpg)") }
$("#replayHo" + "vertree").show();
});
})
$("#replayHovert" + "ree").on("click", function () {
$(this).hide();
$('.beginHov' + 'ertree').css("background-color", "white")
$('.endHover' + "tree").css("background-color", "white")
$("#resultHovertree").css("background-image", "url()")
$("#startHo" + "vertree").show();
})
});
function colorHoverTree() {
switch(hoverTreeRandom(3))
{
case 1:
$(".mainHover" + "tree").css("background-color", "red");
break;
case 2:
$(".mainHovertre" + "e").css("background-color", "green");
break;
case 3:
$(".mainHover" + "tree").css("background-color", "yellow");
break;
}
}
function hoverTreeRandom(n){
return Math.floor(Math.random()*n+1)
}
</script>
</body>
</html>
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery隨機抽獎 - 何問起</title><base target="_blank"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /><style>.mainHovertree,.beginHovertree,.endHovertree{width:30px;height:30px;
border:solid silver 1px;display:inline-block;margin-left:5px;
border-radius: 60px;padding: 30px 30px;}
.mainHovertree{background-color:red}#resultHovertree{width:100px;height:100px;background-repeat:no-repeat}
a{color:blue}
</style>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
<h2>隨機抽獎</h2>
<div class="beginHovertree"></div><div class="endHovertree"></div><div class="mainHovertree"></div>
<br />
<br /><input type="button" id="startHovertree" value="開始" />
<input type="button" id="stopHovertree" value="停止" style="display:none" />
<input type="button" id="replayHovertree" value="再來" style="display:none" />
<br />
<div id="resultHovertree"></div>第三個圓的顏色會自動改變。<br />
點擊開始按鈕，第一個圓會獲取第三個圓當時的顏色，並且第三個圓隱藏；
<br />點擊停止按鈕，第三個圓會慢慢出現，當完全顯示時的顏色賦給第二個圓。
<br />如果第一個和第二個圓顏色相同就中獎，否則沒中獎。
<br /><br /><br />
<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/jquery/8.htm">demo 1</a> <a href="http://hovertree.com/h/bjae/css3circle.htm">畫圓</a> <a href="http://hovertree.com/h/bjae/bgbv6iy5.htm">原文</a>
<br />
本實踐實用的jquery函數有toggle() ,show(),hide(),.css()等。
</div>
<script>
$(document).ready(function () {
var int = self.setInterval("colorHoverTree()", 400)
$("#startHovertr" + "ee").on("click", function () {
$("#startHovertre" + "e").hide();
$(".beginHover" + "tree").css("background-color", $(".mainHo" + "vertree").css("background-color"));
$(".mainHo" + "vertree").toggle();
$("#stopHov" + "ertree").show();
})
$("#stopHovertree").on("click", function () {
$("#stopHovertr" + "ee").hide();
$(".mainH" + "overtree").toggle(2000, function () {
$(".endHovertre" + "e").css("background-color", $(".mainHovert" + "ree").css("background-color"));
if (($(".beginHo" + "vertree").css("background-color")) == ($(".endHovertree").css("background-color")))
{ $("#resultHovertree").css("background-image", "url(images/zjhovertree.gif)") }
else { $("#resultHov" + "ertree").css("background-image", "url(images/nohovertrees.jpg)") }
$("#replayHo" + "vertree").show();
});
})
$("#replayHovert" + "ree").on("click", function () {
$(this).hide();
$('.beginHov' + 'ertree').css("background-color", "white")
$('.endHover' + "tree").css("background-color", "white")
$("#resultHovertree").css("background-image", "url()")
$("#startHo" + "vertree").show();
})
});
function colorHoverTree() {
switch(hoverTreeRandom(3))
{
case 1:
$(".mainHover" + "tree").css("background-color", "red");
break;
case 2:
$(".mainHovertre" + "e").css("background-color", "green");
break;
case 3:
$(".mainHover" + "tree").css("background-color", "yellow");
break;
}
}
function hoverTreeRandom(n){
return Math.floor(Math.random()*n+1)
}
</script>
</body>
</html>
小編推薦
熱門推薦