이 글은 주로 jquery 복권 애플릿 관련 정보를 소개합니다. 자세한 아이디어, 구현 코드 및 구현 렌더링은 여기에서 제공됩니다. 필요한 친구는
이것을 참조할 수 있습니다. 어디에서나 위챗 미니 프로그램에 대한 뉴스나 보도를 볼 수 있고, 블로그 정원에도 위챗 미니 프로그램에 대한 글을 쓰는 사람들이 많습니다. 하지만 제가 오늘 이야기하고 싶은 것은 WeChat 애플릿이 아니라 간단한 jquery로 작성된 재미있는 복권 애플릿입니다. 마지막으로 복권 애플릿의 업데이트에 대한 몇 가지 지침과 Math.random에 대한 약간의 지식을 소개했습니다. (최종 결과는 http://runjs.cn/detail/rq3bbhto에 저장됩니다. 효과를 보려면 클릭하세요.)
간단한 복권 애플릿의 예를 살펴보겠습니다.
html:
<p class="g-lottery-box">
<p class="g-lottery-img">
<a class="playbtn" href="javascript:;" title="开始抽奖"></a>
</p>
</p>css:
*{margin: 0; padding: 0;}
.g-lottery-box {
width: 400px;
height: 400px;
margin-left: 30px;
position: relative;
background: url(images/0.gif) no-repeat;
margin: 0 auto;
}
.g-lottery-box .g-lottery-img {
width: 340px;
height: 340px;
position: relative;
background: url(images/1.png) no-repeat;
left: 30px;
top: 30px;
}
.g-lottery-box #clik {
width: 186px;
height: 186px;
position: absolute;
top: 77px;
left: 77px;
background: url(images/2.png) no-repeat;
}js :
/* 注意引用的顺序
* <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
* <script src="js/jquery.rotate.min.js" type="text/javascript" charset="utf-8"></script>
* <script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
*
* Creat By foodoir 2010-10-11
*
* */
var raNum;
//注意：要将raNum设置为全局变量，容易出错
$(function() {
$('#clik').click(function() {
//
raNum = Math.random()*360;
$(this).rotate({
duration:3000,
angle:0,
animateTo:raNum+720+360,
callback:function(){
A();
}
});
});
});
function A(){
if(0 < raNum && raNum <= 30){
alert("恭喜您抽到理财金2000元！");
return;
}else if(30 < raNum && raNum <= 90){
alert("谢谢参与~再来一次吧~");
return;
}else if(90 < raNum && raNum <= 150){
alert("恭喜您抽到理财金5200元！");
return;
}else if(150 < raNum && raNum <= 210){
alert("恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!");
return;
}else if(210 < raNum && raNum <= 270){
alert("谢谢参与~再来一次吧~");
return;
}else if(270 < raNum && raNum <= 330){
alert("恭喜您抽到理财金1000元！");
return;
}else if(330 < raNum && raNum <= 360){
alert("恭喜您抽到理财金2000元！");
return;
}
}작은 프로그램에 대한 몇 가지 생각:
생각 1: 있음 A () 메소드에 if...else를 많이 사용해서 코드가 보기에 좋지 않습니다.
해결책: switch 방법 사용
switch(data) {
case 1:
rotateFunc(1, 0, '恭喜您获得2000元理财金!');
break;
case 2:
rotateFunc(2, 60, '谢谢参与~再来一次吧~');
break;
case 3:
rotateFunc(3, 120, '恭喜您获得5200元理财金!');
break;
case 4:
rotateFunc(4, 180, '恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!');
break;
case 5:
rotateFunc(5, 240, '谢谢参与~再来一次吧~');
break;
case 6:
rotateFunc(6, 300, '恭喜您获得1000元理财金!');
break;
}
//后面还需要定义函数rotateFunc，在这里直接使用另外一种方法来完成
var rotateFunc = function(awards, angle, text) {
isture = true;
$btn.stopRotate();
$btn.rotate({
angle: 0,
duration: 4000, //旋转时间
animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转
callback: function() {
isture = false; // 标志为 执行完毕
alert(text);
}
});
};생각 2: 실용적 의 대형 턴테이블은 여러 번 회전할 수 있지만 이때 효과는 1회전 미만입니다. 여러 회전의 효과를 보려면 어떻게 해야 합니까?
해결책: animateTo:raNum 뒤에 360을 곱하고 원하는 턴 수를 곱합니다(예: 3회 무승부)
animateTo:raNum+360*3
생각 3: 추첨 횟수를 제한할 수 있나요?
해결책: (무승부 3개를 예로 들어보세요)
$(function() {
var i =0;
$('#clik').click(function() {
i++;
if(i>3){
alert("您的抽奖机会已经用完！");
}
//代码省略
});
});생각 4: 이전 아이디어에 따르면 각 복권에 당첨될 확률은 1/3이지만 실제로는 사용자가 당첨되는 것을 원하지 않습니다. 어떻게 해야 할까요?
해결책: 1. raNum을 직접 변경합니다(사용자가 전자 카드를 받지 못하게 하려면)
raNum = Math.random()*360;
if(150 < raNum && raNum <= 210){
raNum += 60;
}2. 판단 조건을 수정합니다
else if(150 < raNum && raNum <= 210){
//再将概率减小到1%
var n = Math.random()*100;
if(n<1){
alert("恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!");
}else{
raNum += 60;
}
return;
}
생각 5: 사용자에게 남은 숫자를 알려줄 수 있나요? 무승부?
해결책: 새 변수를 만든 다음 DOM 메서드를 통해 표시합니다.
<h3>欢迎来到foodoir抽奖小程序，您还有<span id="ii">3</span>次抽奖机会</h3>
h3{
text-align: center;
font-family: "微软雅黑", "microsoft yahei";
line-height: 60px;
}
h3 span{
font-size: 40px;
line-height: 60px;
font-family: elephant;
display: inline-block;
padding: 5px 20px;
border: 2px solid red;
border-radius: 10px;
color: #f00;
background-color: yellow;
}
var ii = 3-i;
if(ii>=0){
$('#ii').html(ii);
}Thinking Six : KouKou 게임을 할 때, 누가 방금 상을 받았는지 묻는 스크롤 화면을 자주 보게 됩니다. 어떻게 해야 할까요?
해결책: 백그라운드에서 데이터를 조정해야 하지만 먼저 데이터를 직접 설정하고 날짜<를 사용할 수도 있습니다. 🎜 in Javascript >
<p class="mar"> <marquee><span id="time"></span>恭喜foodoir抽到京东e卡！！！！</marquee> </p> var now =new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); var t = hours+":"+minutes+":"+seconds; $('#time').html(t);
2. 추가 로그인 및 등록 기능, 복권은 성공적으로 등록하고 로그인한 후에만 수행할 수 있습니다
3. 추첨된 경품에 대해 링크를 설정하고 클릭하면 경품을 사용할 수 있는 인터페이스로 이동할 수 있습니다
4 ....
아니면 이렇게 합시다--》
2. 경품 추첨 후, 기존 사용자는 로그인 후 보상을 받을 수 있으며, 신규 사용자는 등록해야 합니다. 신규
사용자는 추첨 기회를 등록한 후 세 번 받게 됩니다. 3. 로그인 후 포인트 몰에 들어가게 됩니다. 여러 순위(부 순위 및 교환 순위)와 교환할 수 있는 동등한 대체 항목이 있습니다.
4. ...
ECMAScript 规范是这样描述 Math.random() 的：“返回一个整数，该整数的取值范围大于等于 0 而小于 1，浏览器开发商使用自定义的算法或策略从该范围内实现均匀分布的随机或伪随机效果。”
显然，规范中遗漏了大量的细节。首先，它没有定义精度。由于 ECMAScript 使用 IEEE 754 双精度浮点数存储所有数值，所以理论上应该有 53 位的精确度，即随机数的随机范围是 [1/x^53, 2^53-1]，但实际上，V8 中的 Math.random() 只有 32 位精度，不过这已经足够我们用的了。
真正的问题是规范放任浏览器开发者自由实现该方法，且没有限制最小的周期长度，唯一对分布的要求也只是“近似均匀”。
关于8 PRNG（）
var MAX_RAND = Math.pow(2, 32);
var state = [seed(), seed()];
var mwc1616 = function mwc1616() {
var r0 = (18030 * (state[0] & 0xFFFF)) + (state[0] >>> 16) | 0;
var r1 = (36969 * (state[1] & 0xFFFF)) + (state[1] >>> 16) | 0;
state = [r0, r1];
var x = ((r0 << 16) + (r1 & 0xFFFF)) | 0;
if (x < 0) {
x = x + MAX_RAND;
}
return x / MAX_RAND;
} 上述代码就是 V8 PRNG 的核心逻辑。在老版本的 V8 源码中对此有一段注释：“随机数生成器使用了 George Marsaglia 的 MWC 算法。”根据这段注释，我从谷歌搜索到了以下信息：
George Marsaglia 是一个毕生致力于 PRNG 的数学家，他还开发了用于测试随机数生成质量的工具Diehard tests
MWC（multiply-with-carry）是由 Marsaglia 发明的 PRNG 算法，非常类似于 LCG（linear congruential generators，线性同余法），其优势在于生成的循环周期更长，接近于 CPU 的循环周期。
不过，V8 PRNG 与经典的 MWC 生成器并不相同，因为它不是对 MWC 生成器的简单扩展，而是组合使用了两个 MWC 子生成器（r0 和 r1），并最终拼接成一个随机数。这里略过相关的数学计算，只说结论，每个子生成器最长的循环周期长度都是 2^30，合并后为 2^60。
前面提到过，我们定义的标识符有 2^132 种可能性，所以 V8 的 Math.random() 并不能满足这一需求。尽管如此，我们仍使用该函数并假设生成的随机数是均匀分布的，那么生成一亿个标识符后出现碰撞的可能性才只有 0.4%，但现在发生碰撞的时间也太早了，所以我们的分析一定有什么地方出错了。之前已经证明循环周期长度是正确的，那么很有可能生成的随机数不是均匀分布的，一定有其他的结构影响了生成的序列。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
위 내용은 jquery 복권 애플릿 구현 방법(코드) 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
