jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!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">…
http://www.thinkphp.cn/code/1153.html 网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序. 若是想看更多js特效.网站源码. js教程请访问 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载. 首先要准备两张图片,即圆盘和指针,然后我们在#disk来放置圆盘背景图片,在css中控制,用#start来放置指针图片start.png. <div id="disk"&…
C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25.可不可以刚好保留到最后一位不是0的位置?默认保留2位,如果真的有3位小数,就保留3位,有4位就保留4位. 先说一下ToString("0.00##")中0和#的区别: 0 代表占位的.如果ToString("0.00") 这样就是保留两位小数,无论小数有多少位或者无…
一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510p…
PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, //中奖id "name" => "谢谢参与", //奖品名称 "count" => "100", //库存 ), 1 => array( "id" => 1, "name&quo…
在线抽奖程序在很多网站上很多,抽奖形式多种多样,Flash抽奖偏多,本文将给大家介绍jQuery转盘抽奖,结合代码实例将使用jQuery和asp.net来实现转盘抽奖程序,为了便于理解,文章贴出实现源代码作为分享.通过转动转盘指针来完成抽奖的一种抽奖形式,根据旋转角度来控制指针停留的位置--幸运大转盘. 1.先来张幸运大抽奖效果图 2.Default.aspx页面代码 <!-- 更多技术分享请看博客:http://blog.csdn.net/fuyifang -->  <span sty…
原理 先看图 可以看到1-6等奖都只有1个 ,7等奖有6个.指针默认指向上图位置,记为0°. 每个奖项对应不同的角度,圆的角度为360°,分成12块,所以每块为30°. 为了防止指针指着相邻两个将向之间的线,所以记为一等奖的最小角度为1°,最大角度为29°.同理可找出其他奖项的角度,这要注意,七等奖有6个. 然后呢,每个奖项都有不同的中奖概率,我们根据概率来获取奖项(概率可以设置为0,你懂的-),获取奖品后,在根据最大和最小角度生成一个随机数,来让指针旋转即可.. HTML代码 代码是基于thi…
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: ​ 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是没找到点击按钮可以向两边贴边的拖拽,所以汇总网上查阅到的相关资料自己稍微修改了一点.代码如下: $(function(){ //签到按钮拖拽 //首先,设置cookie值,使到不同的页面刷新拖拽的按钮位置不会变 function setCookie(name,value,expires){ var…
转盘抽奖主要有两种,指针转动和转盘转动,个人觉得转盘转动比较好看点,指针转动看着头晕,转盘转动时指针是在转盘的中间位置,这里要用到css的transform属性和transition属性,这两个因为不常用最好是上网查查,用法和功能. 在html部分 <div id="wheel_surf"> <div class="wheel_surf_title">幸运大转盘</div> <div class="lucky-wh…
同学你好,欢迎来到<跟我一起学编程>,我是包老师.这是<Scratch3.0编程>课程的第24课,我这节课教你做一个抽奖游戏:幸运大转盘. 学习目标: 1. 能够熟练使用造型工具绘制角色造型 2. 熟练使用“侦测”中识别颜色的指令 3. 熟练使用运动.控制等程序指令   任务描述: 1. 绘制“转盘”角色,将转盘分成四部分,分别填充不同的颜色,并分别代表中奖”彩电“,“冰箱”,“洗衣机”和“没中奖”. 2. 添加“箭头”角色 和“小猫”角色. 3. 点击“绿旗”开始后,转盘向右旋转…
目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的转动效果.第二部分侧重使用PHP后台代码控制抽奖几率并最终实现转盘抽奖,将在下一篇文章中有讲解. 准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码:  <div class=…
为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...)...... 这里来讲解下转盘抽奖效果. 当用户进入这个抽奖页面时,一般会“华丽”的设计所吸引,虽然明知中奖几率几乎等于0,图个运气,都会去点“开始抽奖”,于是“折腾”开始了. 你还没有登录,请登录后再来 你还没有抽奖资格,请做做“什么”后再来 你的抽奖机会用完了,请明天再来 很抱歉,你没有中奖 ... 来…
效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现一下,直接另存这三图片引入进去即可.如果不会请修改成对应的图片名字,放到同一个文件下. 基本原理: 1,通过设置CSS样式的position属性,z-index属性等实现背景图,转盘图与指针图的层叠摆放: 2,通过设置元素style.transform = "rotate(0deg)"实现…
先AD一下我的群:Win10开发者群:53078485 最近在写一个APP,其中需要一个转盘动画的源码,找了很多但是都没有找到,无奈只好自己来写,写完效果自己还是比较满意的,分享出来,有需要的童鞋可以拿去用. 先来一张效果图: 功能: 1.五个奖项的中奖几率可以自由调整. 2.用户的金币信息云端存储. 3.每天可以免费抽奖一次. 4.金币信息自由定义. 5.其他,请自行挖掘. 需要准备的: A.图片素材:demo包里有,可以自行提取出来使用,我这个转盘感觉不是特别圆润,也可以自己作图来替换掉.…
点击开始 直接css动画 如果你要自己控制转到哪里 那就多写几个class 根据不同角度 运行不同的class..<pre>.zhuandong{ animation: zhuandong 5s ease-in-out forwards; -webkit-animation: zhuandong 5s ease-in-out forwards;} @-webkit-keyframes zhuandong { 0% { } 100% { -webkit-transform:rotate(1123…
AJ分享,必须精品 效果 实现过程: 基础UI搭建 这里主要是用了xib搭建,首先我们分析,有中间的开始按钮,背景图片,还有星座按钮,这里能用xib做的事开始按钮和背景图片. 如图: 星座按钮的搭建: 这里主要用了for循环的代码: 先确定图片,然后主要是根据我们的旋转角度来设置12个按钮的anchorPoint和position // 加载图片 UIImage *norImage = [UIImage imageNamed:@"LuckyAstrology"]; UIImage *s…
前台页面: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="html5,本地存储" /> <meta name="description" content="Helloweba演示平台,演示XHTML.CSS.jquery.PHP案例…
包在文件中 lottery.zip <!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="keywords" content="html5,本地存储" /><meta name="description" content="Helloweba演示平台,演示XHTML.CSS.jquer…
大转盘是比较常见的抽奖活动 .以前做过h5的大转盘,最近小程序比较火,客户要求做小程序的大转盘.我们就来分析下代码.先上几个图:     界面效果还是很不错的. 做界面还是比较容易的,只要有前端基础没啥难度. 关键是 抽奖的动画,我们就是要小程序本身的动画: 界面加载的时候定义一个动画对象: onLoad(opt) { this.setPlateData(); //执行设置转盘表面的文字 let that = this; let aniData = wx.createAnimation({ //…
微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公众账号关注.对于企业来说,做微信推广重要的一个方面就是提高用户和公众账号之间的黏度,而微信大转盘就是其中最为常见的活动. 下面详细介绍: 一.使用 1. 新建一个大转盘的活动: 2. 奖项设置 3. 保存后,在微信里给公众号发一个“大转盘”的消息, 就会收到大转盘的内容 4. 点击进入大转盘活动,然…
代码地址如下:http://www.demodashi.com/demo/14209.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现用户自定奖品列表 带动画(动画可做参靠,个人要是觉得不好看可以自定义动画) 实现抽奖功能 2.案例目录结构 二.程序实现具体步骤 1.index.wxml代码 <!--index.wxml-->…
项目需求运用到大转盘 可设置概率 可直接自定义结果 效果如下…
源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘图的绚丽,但也总算完成了一个抽奖的 Demo,详见:https://github.com/givebest/wechat-turntalbe-canvas. 事后想起,CSS3 实现也并不是无有益处,比如简单.快捷.调试方便.渲染想来也是要比 Canvas 要高效的,更重要的一点是支持媒体查询,大转…
前言: 公司原来开发大转盘抽奖活动用的是flash 我发现swf文件竟然有6m大,吓尿了! 其实完全可以用js写的,但是自身前端功力有限,且时间紧迫,所以直接用旋转插件就好,兼容各方面都可以保证. 1.引用Jquery.js .jQueryRotate.2.2.js 插件 2.html代码: <div style="width: 480px;margin: 0 auto;height: 480px;background:url(http://weixin.maotui.cn/web/wec…
php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂 <?php /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为:array(100,200,300,400), * 开始是从1,1000 这个概率范围内筛选第一个数是否在他的出现概率范围之内, * 如果不在,则将概率空间,也就是k的值减去刚刚的那个数字的概率空间, * 在本例当中就是减去100,也就是说第二个数是在1,900这个范围内筛选的. * 这样 筛选到最终,总…
抽奖程序在实际生活中广泛运用,由于应用场景不同抽奖的方式也是多种多样的.本文将采用实例讲解如何利用jQuery+PHP+Mysql实现类似电视中常见的一个简单的抽奖程序. 查看演示 本例中的抽奖程序要实现从海量手机号码中一次随机抽取一个号码作为中奖号码,可以多次抽奖,被抽中的号码将不会被再次抽中.抽奖流程:点击“开始”按钮后,程序获取号码信息,滚动显示号码,当点击“停止”按钮后,号码停止滚动,这时显示的号码即为中奖号码,可以点击“开始”按钮继续抽奖. HTML <div id="roll&…
<?php //中奖概率算法(php 可用于刮刮卡,大转盘等抽奖算法) /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为:array(100,200,300,400), * 开始是从1,1000 这个概率范围内筛选第一个数是否在他的出现概率范围之内, * 如果不在,则将概率空间,也就是k的值减去刚刚的那个数字的概率空间, * 在本例当中就是减去100,也就是说第二个数是在1,900这个范围内筛选的. * 这样 筛选到最终,总会有一个数满足要求. * 就相当于去…
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="…
本文主要向大家介绍了PHP语言实现大转盘抽奖算法,通过具体的实例向大家展示,希望对大家学习PHP抽奖有所帮助. 流程:1.拼装奖项数组,2.计算概率,3.返回中奖情况 代码如下:中奖概率 ' v ' 可以在后台设置,传到此方法中,注意传整数 function get_gift(){ //拼装奖项数组 // 奖项id,奖品,概率 $prize_arr = array( '0' => array('id'=>1,'prize'=>'平板电脑','v'=>0), '1' => ar…
抽奖大转盘演示:http://www.sucaihuo.com/php/3301.html function getRand($proArr, $proCount) { $result = ''; $proSum = 0; foreach ($proCount as $key => $val) { if ($val <= 0) { continue; } else { $proSum = $proSum + $proArr[$key]; } } foreach ($proArr as $key…