整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
圖1
圖2
圖3
就愛(ài)UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴
注本頭條號(hào)，專(zhuān)注做前端
轉(zhuǎn)盤(pán)抽獎(jiǎng)這個(gè)在我們平時(shí)的前端項(xiàng)目中用到還挺多，用html5+canvas的方式來(lái)做我認(rèn)為是最好的，支持移動(dòng)端，今天分享的這個(gè)就是基于 html5+canvas實(shí)現(xiàn)，并且我還用到過(guò)幾次。
中獎(jiǎng)概率，中獎(jiǎng)提示，可抽獎(jiǎng)次數(shù)，旋轉(zhuǎn)角度等等，都可以配置，非常實(shí)用
//
獎(jiǎng)頁(yè)面
廢話(huà)不多說(shuō)，直接上源代碼，直接運(yùn)行就可以。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery數(shù)字隨機(jī)滾動(dòng)抽獎(jiǎng)特效代碼 - JS代碼網(wǎng)</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<style type="text/css">
body{background-color:#fff;text-align:center;padding-top:50px;}
#Result{border:3px solid #40AA53;margin:0 auto;text-align:center;width:400px;padding:50px 0;background:#efe;}
#ResultNum{font-size:50pt;font-family:Verdana}
#Button{margin:50px 0 0 0;}
#Button input{font-size:40px;padding:0 50px;}
#btn{background-color:#40AA53;border:1px solid #40AA53;width:20%;height:45px;margin:0em auto;font-size:1em;border-radius:2.5px;-moz-border-radius:2.5px;-webkit-border-radius:2.5px;color:#FFF;}
</style>
<h1 style="color:#40AA53">抽獎(jiǎng)結(jié)果</h1>
<div id="Result" style="color:#40AA53">
<span id="ResultNum">0</span>
</div>
<div id="Button">
<input type='button' id="btn" value='開(kāi)始' onclick='beginRndNum(this)'/>
</div>
</body>
</html>
JS代碼需要的請(qǐng)私我郵箱，我給你們發(fā)。。。
每天都有更新，喜歡的可以關(guān)注我。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
