js实现可键盘控制的简单抽奖程序
- 格式:doc
- 大小:20.50 KB
- 文档页数:2
C#模拟实现抽奖⼩程序的⽰例代码⽬录1.抽奖主界⾯2.操作步骤2.1 抽奖界⾯2.2 抽奖结果导出3.源码3.1 数据库连接3.2 抽奖程序1.抽奖主界⾯2.操作步骤S键开始;0、1、2、3、4、5键分别对应6次奖项;分别是特等奖、⼀等奖、⼆等奖、三等奖、四等奖、五等奖9键是加抽奖;空格退出抽奖结果界⾯;P键关闭⽓泡效果。
2.1 抽奖界⾯2.2 抽奖结果导出*************特等奖奖获得者:(抽奖时间:2021/12/30 22:41:22)***************⼯号:100899 姓名:⽯臻臻的杂货铺领域:后端*************⼀等奖奖获得者:(抽奖时间:2021/12/30 22:42:09)***************⼯号:100931 姓名:牧⽺⼈_阿标领域:移动*************三等奖奖获得者:(抽奖时间:2021/12/30 22:42:17)***************⼯号:100978 姓名:前端⽼实⼈领域:前端⼯号:100952 姓名:Oliver尹领域:前端⼯号:100990 姓名:愿许浪尽天涯领域:运维与安全⼯号:101024 姓名:乔乔家的龙⼥仆领域:其他*************特等奖奖获得者:(抽奖时间:2021/12/30 22:42:46)***************⼯号:100900 姓名:川川菜鸟领域:⼤数据*************六等奖获得者:(抽奖时间:2021/12/30 22:42:51)***************⼯号:101013 姓名:忧伤额蜗⽜领域:移动⼯号:101017 姓名:ML.star 领域:后端⼯号:100921 姓名:坚果前端の博客领域:移动⼯号:100986 姓名:Mr数据杨领域:全栈⼯号:100969 姓名:⼤数据⼩禅领域:⼤数据⼯号:100898 姓名:⼩⼩明-代码实体领域:其他⼯号:100949 姓名:执久呀领域:后端⼯号:100977 姓名:yang_z_1 领域:⼤数据⼯号:100944 姓名:可可卷领域:AI⼯号:100988 姓名:曲鸟领域:全栈⼯号:101018 姓名:余光、领域:前端⼯号:100962 姓名:拈花倾城领域:运维与安全⼯号:100918 姓名:艾醒领域:AI⼯号:100979 姓名:林深时不见⿅领域:后端⼯号:100964 姓名:繁星蓝⾬领域:⼤数据⼯号:101022 姓名:互联⽹-⼩阿宇领域:运维与安全⼯号:100980 姓名:振华OPPO 领域:移动⼯号:100923 姓名:_陈哈哈领域:全栈⼯号:100930 姓名:Java执梗领域:后端⼯号:100917 姓名:1_bit 领域:全栈3.源码3.1 数据库连接using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Data;using System.Data.OleDb;using System.Collections;namespace BoeLottery.Model{public class LotteryDataContext{public LotteryDataContext(){if (!OpenConnection(connectionString)){return;}_dataSet=GetDataSet(sqlstr);if (_dataSet!=null){_dataTable = _dataSet.Tables[0];rowData = new List<KeyValuePair<int, int>>();}MaxNO=IMaxNO = GetMaxNoDB();GetDataByte();MaxNO = GetMaxNoDB()+1;}private OleDbDataAdapter dataAdapter = null;private OleDbConnection connection = null;private string connectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=Data//lottery.mdb;Jet OLEDB:Database Password=123456"; string sqlstr = "select * from lottery ";DataSet _dataSet = null;DataTable _dataTable = null;public int MaxNO {get;set;}public int IMaxNO { get; set; }/// <summary>/// Open Connection/// </summary>/// <param name="connectionString"></param>/// <returns></returns>public bool OpenConnection(string connectionString){try{connection = new OleDbConnection(connectionString);connection.Open();}catch (System.Exception ex){if (connection!=null){connection.Close();}return false;throw ex;}return true;}public bool CloseConnection(){if (connection!=null){connection.Close();}return true;}public DataSet GetDataSet(string sqlString){try{DataSet dataSet = new DataSet();dataAdapter = new OleDbDataAdapter(sqlString, connection);dataAdapter.Fill(dataSet);return dataSet;}catch (System.Exception ex){throw ex;}}public List<KeyValuePair<int,int>> rowData { get; set; }public OleDbDataReader GetDataReader(string sqlString){OleDbCommand command = new OleDbCommand(sqlString, connection);OleDbDataReader dataReader = command.ExecuteReader();return dataReader;}public void GetDataByte(){string data = Helper.Logger.ReadLog("System.Data.DataMangentExtensions.dll"); string[] dataSplit=data.Split(';');foreach (string item in dataSplit){GetAdDB(Convert.ToInt32(item));}}public int GetMaxNoDB(){//if (_dataSet.Tables["lottery"].Rows.Count == 0) return 0; 对不对return _dataTable.Rows.Count;}/// <summary>/// 根据ID获取⽤户信息/// </summary>/// <param name="employeeId"></param>/// <returns></returns>public Employee GetQueryData(int employeeId){Employee employee = new Employee();employee.EmployeeID = employeeId;IEnumerable<DataRow> queryData = from p in _dataTable.AsEnumerable() where (int)p.Field<Int16>("userid") == employeeId select p;foreach(var data in queryData){employee.EmployeeNo=data.Field<string>("userno");employee.EmployeeName = data.Field<string>("username");employee.EmployeeDep = data.Field<string>("userdep");}return employee;}/// <summary>/// 根据EmployNo获取⽤户信息/// </summary>/// <param name="employNo"></param>/// <returns></returns>public Employee GetQueryDataByNo(int employNo){IEnumerable<DataRow> queryData = from p in _dataTable.AsEnumerable() where p.Field<string>("userno") == employNo.ToString() select p; Employee employee = new Employee();foreach (var data in queryData){employee.EmployeeNo= data.Field<string>("userno");employee.EmployeeID = (int)data.Field<Int16>("userid");employee.EmployeeName = data.Field<string>("username");employee.EmployeeDep = data.Field<string>("userdep");}return employee;}public void GetAdDB(int employNo){IEnumerable<DataRow> queryData = from p in _dataTable.AsEnumerable() where p.Field<string>("userno") == employNo.ToString() select p; if (queryData.Count() == 0) return;DataRow row = _dataTable.NewRow();foreach(var data in queryData){row["userno"]=data.Field<string>("userno");row["userid"] = GetMaxNoDB()+1;rowData.Add(new KeyValuePair<int,int>((int)data.Field<Int16>("userid"), GetMaxNoDB() + 1));//rowData.Add(new KeyValuePair<int,int>(GetMaxNoDB() + 1,(int)data.Field<Int16>("userid")));//row["userid"] = (int)data.Field<Int16>("userid");row["username"] = data.Field<string>("username");row["userdep"] = data.Field<string>("userdep");}_dataTable.Rows.Add(row);}}}3.2 抽奖程序//各奖项所有的⼈数 { 特等奖、⼀等奖、⼆等奖、三等奖、四等奖 }public int[] WinnerNums = {4, 4, 12, 16, 40, 60, 80};//抽奖次数public int[] LotteryTimes = {4, 4, 3, 4, 2, 3, 4};public int[] HasNotWonNums=new int[7] ;//= { 5, 1, 1, 1, 12 };#endregion#region 设置绑定ICommandpublic ICommand StartLotteryCommand { get; private set; } // 开始抽奖public ICommand SpecialLotteryCommand { get; private set; } //特等奖public ICommand FirstLotteryCommand { get; private set; }public ICommand SecondLotteryCommand { get; private set; }public ICommand ThirdLotteryCommand { get; private set; }public ICommand FouthLotteryCommand { get; private set; }public ICommand SouvenirLotteryCommand { get; private set; }public ICommand SixvenirLotteryCommand { get; private set; }public ICommand ExtendLotteryCommand { get; private set; } //加抽奖#endregionpublic MainViewModel(){//HasNotWonNums = LotteryTimes; //未中奖的赋值for (int i = 0; i < 7;i++ ){HasNotWonNums[i] = LotteryTimes[i];}//GetWinner();//添加⼋个时钟AddTimer(10);StartLotteryCommand = new RelayCommand(()=>{TimerStart();});SpecialLotteryCommand = new RelayCommand(()=>{logger.WriteLog("*************特等奖奖获得者:(抽奖时间:" + DateTime.Now.ToString() + ")***************"); Messenger.Default.Send("特等", "showResultGrade");Lotterying(0);//添加显⽰逻辑});ExtendLotteryCommand = new RelayCommand(() =>{logger.WriteLog("*************加抽奖奖获得者:(抽奖时间:" + DateTime.Now.ToString() + ")***************"); TimerStop();List<Employee> employWinners = GetLotteryList(1);if (employWinners.Count == 0){return;}Messenger.Default.Send("加抽", "showResultGrade");ShowResult(employWinners);//添加显⽰逻辑});FirstLotteryCommand = new RelayCommand(()=>{logger.WriteLog("*************⼀等奖奖获得者:(抽奖时间:" + DateTime.Now.ToString() + ")***************"); Messenger.Default.Send("⼀等", "showResultGrade");Lotterying(1);});SecondLotteryCommand = new RelayCommand(()=>{logger.WriteLog("*************⼆等奖奖获得者:(抽奖时间:" + DateTime.Now.ToString() + ")***************");Messenger.Default.Send("⼆等", "showResultGrade");Lotterying(2);});ThirdLotteryCommand = new RelayCommand(()=>{logger.WriteLog("*************三等奖奖获得者:(抽奖时间:" + DateTime.Now.ToString() + ")***************");Messenger.Default.Send("三等", "showResultGrade");Lotterying(3);});FouthLotteryCommand = new RelayCommand(() =>{logger.WriteLog("*************四等奖奖获得者:(抽奖时间:" + DateTime.Now.ToString() + ")***************");Messenger.Default.Send("四等", "showResultGrade");Lotterying(4);});SouvenirLotteryCommand = new RelayCommand(()=>{logger.WriteLog("*************五等奖获得者:(抽奖时间:" + DateTime.Now.ToString() + ")***************");Messenger.Default.Send("五等", "showResultGrade");Lotterying(5);});//public ICommand SixvenirLotteryCommand { get; private set; }SixvenirLotteryCommand = new RelayCommand(() =>{logger.WriteLog("*************六等奖获得者:(抽奖时间:" + DateTime.Now.ToString() + ")***************");Messenger.Default.Send("六等", "showResultGrade");Lotterying(6);});Messenger.Default.Register<string>(this, "AppClose",(msg) =>{logger.Close();lotteryDataContext.CloseConnection();});}以上就是C#模拟实现抽奖⼩程序的⽰例代码的详细内容,更多关于C#抽奖⼩程序的资料请关注其它相关⽂章!。
JavaScript简单抽奖程序的实现及代码简单抽奖程序的实现及代码1.需求说明某公司年终抽奖,需要有如下功能1)可以根据实际情况设置到场⼈数的最⼤值2)点击“开始”,⼤屏幕滚动,点击“停⽌”,获奖者的编号出现在⼤屏幕上3)在界⾯⾥显⽰全部奖项获奖⼈编号4)不重复获奖5)不会因为输⼊错误⽽导致抽奖结果异常。
2.代码呈上1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN"><html><head><title>某公司周年庆抽奖</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script language="javascript">var timer;var flag = new Array(100);var existingnum = new Array(100);var clickTimes = 0;var randnum;var cellnum =1;var mobile;var num ;function check_input(){var input = document.getElementById("real_num").value;var re = /^[1-9]+[0-9]*]*$/;if (!re.test(input)){alert("请输⼊正整数");window.location.href=window.location.href;return false;}}//get the random numbers from the mobile array every 0.05sfunction setTimer(){timer = setInterval("getRandNum();",50);document.getElementById("start").disabled = true;document.getElementById("end").disabled = false;}function getRandNum(){document.getElementById("result").value = mobile[GetRnd(0,num)];}function GetRnd(min,max){randnum = parseInt(Math.random()*(max-min+1));return randnum;}//------------------------------------------------//turn the input's running downfunction clearTimer(){noDupNum();clearInterval(timer);document.getElementById("start").disabled = false;document.getElementById("end").disabled = true;}// Re defined array:change the length of the array and delete the checked onefunction noDupNum(){mobile.removeEleAt(randnum);var o = 0;for(p=0; p<mobile.length;p++){if(typeof mobile[p]!="undefined"){mobile[o] = mobile[p];o++;}}num = mobile.length-1;}function setValues(){document.getElementById(cellnum).value = document.getElementById("result").value ;cellnum++;}function set_array(){var real_num = document.getElementById("real_num").value ;mobile= new Array(real_num);var o = 0;for(i=1; i<=real_num;i++){mobile[o] = i;o++;}num = mobile.length-1;document.getElementById("set_number").disabled = true;}Array.prototype.removeEleAt = function(dx){if(isNaN(dx)||dx>this.length){return false;}this.splice(dx,1);}</script></head><body><center><div id="main"><div><h1>获奖⼩伙伴</h1><p><input id="result" type="text" size="30" style="height:130px;width:800px;border:2px solid red;font-size:120;" readonly/> </p><p><input id="start" type="button" value="开始" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;" onclick="setTimer()" /><input id="end" type="button" value="停" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;"onclick="clearTimer();setValues();" disabled/></p><p><strong>⼀等奖(1名)</strong></p><table width="190" height="30" border="1"><tr><td><input name="text1" type="text" id="3" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td></tr></table><p>⼆等奖(2名)</p><table width="380" height="30" border="1"><tr><td><input name="text2" type="text" id="2" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="28" readonly/></td><td><input name="text3" type="text" id="1" style="height:30px;width:190px;border:1px solid red;font-size:25;" size="20" readonly/></td></tr></table></div></div><p></p><p></p><div id="setter" style="border:1px solid;width:45em"><h3>系统设置</h3><table width="300" height="30" border="1"><tr><td>活动⼈数</td><td><input type="text" id="real_num" style="width:11em"></td><td><input id="set_number" type="button" value="设置" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:4em; background: #fc0;" onclick="check_input();set_array();"/></td></tr><tr></tr></table><br/><input id="set_number" type="button" value="重新开始抽奖" style="border: 1px solid; border-color: #aaa 000 #000 #aaa;width:45em;height: 3em;background: #fc0;" onclick="window.location.href=window.location.href;"/><p></p></div><center></body></html>复制代码3.丑陋截图我很丑,但是我很温柔~。
幸运⼤转盘抽奖抽奖算法程序实现逻辑近期碰到的⼀个需求,实现⼀个类似⼤转盘抽奖的功能,需⾃定义奖项,各奖项中奖概率,当⽇抽奖最⼤次数,抽奖成本等。
分享⼀个简单的java代码的实现的思路,有不⾜之处感谢各位指正。
初步⽅法⾸先要定义⼏个奖品,例如:iphone 中奖机率 10%100元购物卷中奖机率 30%10元购物卷中奖机率 50%总的中奖机率是 10%+30%+50%=90%剩余10%是谢谢惠顾,不中奖的设计思路这个是把所有商品按照概率分配到数组⾥⾯A[0] = iphoneA[1] = iphoneA[2] = iphone...A[10] = iphoneA[11] = 100元购物卷A[12] = 100元购物卷...然后随机⼀个0到99的数字,例如现在随机的数字是2那么A[2]就是中奖的商品A[2] = iphone//定义中奖率分母百分之int probabilityCount = 100;String[] prizesId = new String[probabilityCount];//获取商品列表List<AdPrizeInfo> prizeInfoList = prizeInfoService.getPrizeInfo();int num = 0;//循环所有商品for (AdPrizeInfo prize : prizeInfoList) {Integer probability = prize.getOdds();//循环商品概率for (int i = 0; i < probability; i++) {prizesId[num] = prize.getId();num ++;}}//随机⼀个数字int index = (int) (Math.random() * probabilityCount);//获取到随机商品IDString prizeId = prizesId[index];优化⽅法设计思路以上⽅法如果⼤概率的话,是很吃内存的,整理优化为⼀下⽅法:使⽤范围算法//定义中奖率分母百分之int probabilityCount = 100;//最⼩概率值String min = "min";//最⼤概率值String max = "max";Integer tempInt = 0;//待中奖商品数组Map<String,Map<String,Integer>> prizesMap = new HashMap<>(); //获取商品列表List<AdPrizeInfo> prizeInfoList = prizeInfoService.getPrizeInfo(); for (AdPrizeInfo prize : prizeInfoList) {Map<String,Integer> oddsMap = new HashMap<>();//最⼩概率值oddsMap.put(min,tempInt);tempInt = tempInt + prize.getOdds();//最⼤概率值oddsMap.put(max,tempInt);prizesMap.put(prize.getId(),oddsMap);}//随机⼀个数字int index = (int) (Math.random() * probabilityCount);AdPrizeInfo prizeInfo = null;Set<String> prizesIds = prizesMap.keySet();for(String prizesId : prizesIds){Map<String,Integer> oddsMap = prizesMap.get(prizesId);Integer minNum = oddsMap.get(min);Integer maxNum = oddsMap.get(max);//校验index 再哪个商品概率中间if(minNum <= index && maxNum > index){prizeInfo = prizeInfoService.selectByPrimaryKey(prizesId);break;}}//如果为空,则没中奖if(prizeInfo == null){prizeInfo = null;}。
javascript实现随机抽奖功能javascript实现随机抽奖,供⼤家参考,具体内容如下⾸先创建⼀个数组⽤于存放抽奖的参与者:var arr=['张三','波波','kk','莉莉','张三丰','刘德华','周杰困','你那⼉','zhere','好的'];给开始和结束按钮div添加点击事件://添加点击开始则开始循环播放document.getElementById("start").addEventListener("click",va);//点击停⽌则停⽌播放并显⽰恭喜中奖document.getElementById("end").addEventListener("click",function (){count++;clearTimeout(i);var name=arr[thisone];arr.splice(thisone,1);var get=document.getElementById("get");get.innerHTML=get.innerHTML+'<br>';get.innerText=get.innerText+`${count}. `+name;})⽤setTimeout实现循环事件,每隔100毫秒就执⾏⼀次循环,随机得到存放参与者的数组的长度之间的随机数,不断修改innerText实现⽤户滚动效果://循环事件function va(){let num=arr.length;console.log(num);if(num===0){clearTimeout(i);//移除开始事件document.getElementById("start").removeEventListener("click",va);document.getElementById("show").innerText="没有了";return;}setTimeout("show()",100);}//获得当前名字下标function getindex() {return parseInt(Math.random()*arr.length);}//循环播放列表function show(){thisone=getindex();document.getElementById("show").innerText=arr[thisone];i=setTimeout("show()",100);}实现的最终效果图如下:当点击开始时:当点击暂停时:以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
js简单抽奖代码核⼼:js的Math对象和Array对象<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>random</title><style>#awardListDom{width: 100%;}</style></head><body><label for="awardListDom">奖项列表</label><br><input type="text" value="" id="awardListDom"> <br><label for="num">抽到的奖</label><br><input type="text" value="" id="num"> <br><button id="submit">开始抽奖</button><script>/** 思路:随机抽奖,抽⼀个奖项便减少⼀个* Math 对象⽅法:/jsref/jsref_obj_math.asp* -random():返回 0 ~ 1 之间的随机数。
* -floor():获取整数* 数组操作:* - splice(x,y); x:起始位置, y:获取并删除个数*/function random(min,max){return Math.floor(min+Math.random()*(max-min));}var awardListDom=document.getElementById("awardListDom"),num=document.getElementById("num"),submit=document.getElementById("submit");var awardList=["⼀等奖","⼆等奖","⼆等奖","三等奖","三等奖","三等奖","⿎励奖","⿎励奖","⿎励奖","⿎励奖","谢谢参与","谢谢参与","谢谢参与","谢谢参与","谢谢参与","谢谢参与"]; awardListDom.value=awardList;submit.onclick=function(){//引⽤数组var oldArray=awardList;var rNum=random(0,oldArray.length);if(oldArray.length<1){awardListDom.value="活动结束";num.value="活动结束";}else{num.value=oldArray[rNum];oldArray.splice(rNum,1);awardListDom.value=oldArray;}}</script></body></html>。
JS旋转实现转盘抽奖效果本⽂实例为⼤家分享了JS旋转实现转盘抽奖效果的具体代码,供⼤家参考,具体内容如下闲来没事,做了⼀个模拟转盘抽奖的HTML&JS的效果:可以在设置的时候,选择⼏个区域,并且可以填写指针将要停⽌的区域⽐如,我选择了"区域2",结果就是这样具体可以见下⾯的源码:(注意,这⾥JQ⽂档没有贴出来,需要⾃⾏引⼊)HTML⽂件:<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>#RotationDiv {/*初始化界⾯,让指针朝上*/transform: rotate(180deg);-ms-transform: rotate(180deg);-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);width: 60px;height: 85px;/*边框是⽤来看旋转的地⽅的*//*border: 1px solid black;*/}</style><!--引⼊jq1.8--><script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script><!--引⼊旋转的js--><script src="js/rotation-index.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">function rotationDiv(num) {RotationIndex("RotationDiv", 8, num, 4, 5)}</script></head><body><div style="height: 85px;"><table align="center"><tr><td><input type="button" value="选择区域:1" οnclick="rotationDiv(1)" /><input type="button" value="选择区域:2" οnclick="rotationDiv(2)" /><input type="button" value="选择区域:3" οnclick="rotationDiv(3)" /><input type="button" value="选择区域:4" οnclick="rotationDiv(4)" /><input type="button" value="选择区域:5" οnclick="rotationDiv(5)" /><input type="button" value="选择区域:6" οnclick="rotationDiv(6)" /><input type="button" value="选择区域:7" οnclick="rotationDiv(7)" /><input type="button" value="选择区域:8" οnclick="rotationDiv(8)" /></td></tr></table></div><table align="center" style="background-image: url(img/revolveBgImage.png); width: 500px;height: 500px;"><tr><td colspan="3"></td></tr><tr><td style="width: 220px;"></td><td><div id="RotationDiv"><img src="img/timg.png" width="100%" /></div></td><td style="width: 220px;"></td></tr><tr><td colspan="3"></td></tr></table></body></html>⾃⼰写的旋转的JS⽂件:/*** @param {Object} indexID 想要旋转的控件的id* @param {Object} areaNum 区域的块数* @param {Object} wantToStop 想要停⽌的位置(块号)* @param {Object} defaultTime 刚开始匀速旋转的时间* @param {Object} chageTime 最后减速旋转的时间*/function RotationIndex(indexID, areaNum, wantToStop, defaultTime, chageTime) {var stopAreaNum = 0; //停在区域的名字数var areaArr = new Array(areaNum);var angle = 1; //每次旋转⾓度// var randomTime = Math.random() * 1500; //随机时间var nowTime = 0; //当前时间,随机起点,让停⽌来的更加真实var disTime = 15; //时间差值,每15毫秒改变⼀次,基本上类似于60Hz刷新频率var disangle = 13; //⾓度差值var angle360 = 0; //⽤于记录⾓度数,360°范围的var UP = (1 - ((12 / chageTime) * defaultTime)); //定义⼀个函数uniformizing parametervar IPFP = 12 * defaultTime + (12 / chageTime) * defaultTime * defaultTime; //定义⼀个反⽐例函数的参数Inverse proportional function parameters var myIntervalInRotationIndex = window.setInterval(function() {nowTime += disTime;//当时间⼩于默认时间时候if((nowTime / 1000) <= defaultTime) {//匀速旋转} else if((nowTime / 1000) > defaultTime && (nowTime / 1000) < (defaultTime + chageTime)) {//当时间⼤于默认时间,开始减速旋转disangle = UP + (IPFP / (nowTime / 1000));/*** 函数式为:* UP+IPFP/t=h* 其中t为时间,h为⾓度**/} else {angle360 = angle % 360;stopAreaNum = angle360 / (360 / areaNum);if(stopAreaNum >= (wantToStop - 1.5)) {disangle = 0.3;} else if(stopAreaNum >= (wantToStop - 1)) {disangle = 0.5;} else {disangle = 0.8;}if(stopAreaNum >= (wantToStop - 0.8) && stopAreaNum <= wantToStop) {window.clearInterval(myIntervalInRotationIndex);}}angle360 = angle % 360;angle += disangle;$("#" + indexID).attr("style", "transform:rotate(" + angle + "deg);-ms-transform:rotate(" + angle + "deg);-moz-transform:rotate(" + angle + "deg);-webkit-transform:rotate(" + angle + "deg);-o-transform:rotate(" + angle + "deg);") }, disTime)}以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
用JavaScript编程语言编写随机选择抽奖程序示例文章标题:用JavaScript编程语言编写随机选择抽奖程序示例介绍内容:抽奖活动是一种常见的活动形式,而编程语言可以帮助我们实现自动化的随机选择抽奖程序。
本文将介绍如何使用JavaScript 编程语言编写一个简单而实用的随机选择抽奖程序示例。
首先,我们需要在HTML页面中创建一个抽奖按钮和一些候选人的列表,如下所示:```html<!DOCTYPE html><html><head><title>随机选择抽奖程序示例</title></head><body><h1>随机选择抽奖程序示例</h1><button onclick="selectWinner()">抽奖按钮</button><ul id="candidates"><li>候选人1</li><li>候选人2</li><li>候选人3</li><li>候选人4</li><!--可以继续添加更多候选人--></ul><h2 id="winner"></h2><script src="script.js"></script></body></html>```在上述HTML页面中,我们创建了一个抽奖按钮,并在<ul>标签中列出了一些候选人的姓名。
点击抽奖按钮后,我们将在JavaScript代码中编写逻辑来随机选择一个候选人作为获奖者,并将结果显示在<h2>标签中。
原⽣js实现跑马灯抽奖效果⽬前好多的微信活动都有⼀些抽奖活动,其中就有跑马灯。
<!DOCTYPE html><html><head><title>跑马灯效果</title><style>table .pao{border:1px solid #e5e5e5;padding:10px 20px;}table .on{border-color:red;color:red;}</style><script>window.onload =function(){var paomadeng = {currentIndex : 1, //当前索引indexCount : 12, //个数timer : 0, //定时器currentCycle : 0, //当前圈数cycles : 4, //跑的圈数speed : 400, //速度,即定时器的时间间隔key : 0, //钥匙,随机数btn : 0, //触发按钮classPrefix : "pao-", //元素类名class前缀reset : function(){//触发对象paomadeng.btn =this;paomadeng.btn.style.display ="none";clearInterval(paomadeng.timer);paomadeng.currentCycle =0;paomadeng.speed =400;paomadeng.key = Math.ceil(Math.random() * paomadeng.indexCount);console.log("key:"+ paomadeng.key);paomadeng.run();},run : function(){console.log("speed:"+ paomadeng.speed);var before = paomadeng.currentIndex ==1? paomadeng.indexCount : paomadeng.currentIndex -1;//设置上⼀索引的类名var beforeNode = document.getElementsByClassName(paomadeng.classPrefix + before)[0];var beforeClassNewName = beforeNode.className.replace("on","");beforeNode.className = beforeClassNewName;//设置当前索引的类名var currentNode = document.getElementsByClassName(paomadeng.classPrefix + paomadeng.currentIndex)[0]; currentNode.className +=" on"; //注意前⾯有空格paomadeng.upSpeed();paomadeng.downSpeed();paomadeng.currentIndex +=1;paomadeng.currentIndex = paomadeng.currentIndex > paomadeng.indexCount ?1: paomadeng.currentIndex; },//加速upSpeed : function(){//前2圈且speed>100时加速if(paomadeng.currentCycle <2&& paomadeng.speed >100){paomadeng.speed -=5* paomadeng.currentIndex ;paomadeng.stop();paomadeng.start();}},//增加圈数并减速downSpeed : function(){//增加圈数if(paomadeng.currentIndex == paomadeng.indexCount){paomadeng.currentCycle +=1;}//如果当前所跑圈数⼩于总圈数-1 并且速度⼩于400,那么减速if(paomadeng.currentCycle > paomadeng.cycles-1&& paomadeng.speed <400){paomadeng.speed +=20;paomadeng.stop();paomadeng.start();}//如果当前所跑圈数⼤于总圈数且索引值等于key,那么停⽌奔跑if(paomadeng.currentCycle > paomadeng.cycles && paomadeng.currentIndex == paomadeng.key){ paomadeng.stop();paomadeng.showPrize();}},stop : function(){clearInterval(paomadeng.timer);},start : function(){paomadeng.timer = setInterval(paomadeng.run , paomadeng.speed);},showPrize : function(){//过⼀会再显⽰提⽰信息setTimeout(function(){alert("恭喜,你中了"+ paomadeng.key +"等奖");paomadeng.btn.style.display ="block";},700);}};document.getElementById("startPao").onclick= paomadeng.reset;};</script></head><body><div class="container"><table><tr><td class="pao pao-1">1</td><td class="pao pao-2">2</td><td class="pao pao-3">3</td><td class="pao pao-4">4</td></tr><tr><td class="pao pao-12">12</td><td class="pao"></td><td class="pao"></td><td class="pao pao-5">5</td></tr><tr><td class="pao pao-11">11</td><td class="pao"></td><td class="pao"></td><td class="pao pao-6">6</td></tr><tr><td class="pao pao-10">10</td><td class="pao pao-9">9</td><td class="pao pao-8">8</td><td class="pao pao-7">7</td></tr></table><br/><input type="button" value="开始跑" id="startPao"/></div></body></html>。
js实现转盘抽奖功能本⽂实例为⼤家分享了js实现转盘抽奖功能的具体代码,供⼤家参考,具体内容如下效果:点击抽奖按钮,转盘开始旋转数圈后停⽌⽰例:抽奖html代码:<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="apple-touch-fullscreen" content="YES" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="format-detection" content="telephone=no" /><link rel="apple-touch-icon-precomposed" href="icon.png" /><meta http-equiv="Cache-Control" content="max-age=0" /><meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0" /> <meta name="MobileOptimized" content="320" /><title>抽奖页</title><script type="text/javascript" src="jquery-3.0.0.min.js"></script><script type="text/javascript" src="disk.js"></script><link type="text/css" rel="stylesheet" href="style.css"/></head><body><div class="wrap_disk"><div class="page"><div id="divDisk" class="disk"><div id="divPointer" class="pointer"></div></div></div></div><script type="text/javascript">disk.init();//抽奖插件初始化if($(window).height()<568){$('.wrap_disk').css('height','568px');}else{$('.wrap_disk').css('min-height',$(window).height());}</script></body></html>抽奖实现js1)原⽣版// JavaScript Document(function(win){var degDivide = 45;var prizeName;var prizeTypeArr = ['⼀等奖','三等奖','继续加油!','⼆等奖','参与奖'];var prizeTypeDegArr = [[300],[180],[240,0],[60],[120]];var disk = {prizeType : 0,nowDeg : 0,willDeg : 0,weixinId : null,contentId : null,turnFlag : true,count : null,init : function(id,contentid,count,flag){var t = this;divPointer.onclick = function(){// t.nowDeg = t.nowDeg%360;// /*webkit*/// divPointer.style.webkitTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';// divPointer.style.webkitTransitionDuration = '4s'// divPointer.style.webkitTransitionProperty = 'width';// divPointer.style.webkitTransform = 'rotate('+ t.nowDeg +'deg)';// divPointer.style.msTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)'; // divPointer.style.msTransitionDuration = '4s'// divPointer.style.msTransitionProperty = 'width';// divPointer.style.msTransform = 'rotate('+ t.nowDeg +'deg)';t.lottery();}},lottery: function(){var t = this;t.prizeType= t._rand();t._judge();},//获取范围内的随机数_rand: function (){var max=4;var min=0;return Math.floor(min+Math.random()*(max-min));},_judge: function(){var t = this,judgeArr = prizeTypeDegArr[t.prizeType],judgeArrLen = judgeArr.length;if(judgeArrLen == 1){t.willDeg = 1080 + judgeArr[0] + 2 + (degDivide-4)*Math.random();prizeName = prizeTypeArr[t.prizeType];}else if(judgeArrLen > 1){var judgeArrRan =Math.floor(judgeArrLen * Math.random());t.willDeg = 1080 + judgeArr[judgeArrRan] + 2 + (degDivide-4)*Math.random();prizeName = prizeTypeArr[t.prizeType];}else{return;}t._turn();},_turn : function(){var t = this;setTimeout(function(){divPointer.style.webkitTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)'; divPointer.style.webkitTransitionDuration = '4s'divPointer.style.webkitTransitionProperty = 'all';divPointer.style.webkitTransform = 'rotate('+ t.willDeg +'deg)';divPointer.style.msTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';divPointer.style.msTransitionDuration = '4s'divPointer.style.msTransitionProperty = 'all';divPointer.style.msTransform = 'rotate('+ t.willDeg +'deg)';//t.nowDeg = t.willDeg;},100);setTimeout(function(){var clss;clss = "noPreize";t.myAlert('',prizeName,'ok',function(){divPointer.style.webkitTransitionProperty = 'width';divPointer.style.webkitTransform = 'rotate(0deg)';divPointer.style.msTransitionProperty = 'width';divPointer.style.msTransform = 'rotate(0deg)';t.turnFlag = true;},clss);},4100)},tels : function(){var t = this;t.myPrompt('请填写⼿机号!','','确定','取消',function(){var telNum = $('.my_prompt_text input').val();var telephone_regx = /^(((13[0-9]{1})|14[0-9]{1}|15[0-9]{1}|18[0-9]{1})\d{8})$/;if(telNum == '' || !telephone_regx.exec(telNum)){t.myAlert('','填写正确⼿机号','ok',function(){t.tels();});}else{//Ajax提交⼿机号码type:"POST",success:function(json){var data = $.parseJSON(json);var submitFlag = data.submit;if(submitFlag == 'succeed'){t.myAlert('','提交成功!','ok',function(){$('.my_prompt').hide();t.turnFlag = true;});}else{t.myAlert('','提交失败!','ok',function(){t.tels();});}},error:function(){t.myAlert('','请检查⽹络!','ok',function(){t.tels();});},timeout:'5000',url:'/weixin/front_index.inc.php?type=turntable&action=submit', data:{id:t.wenxinId,contentid:t.contentId,telephone:telNum}})}},function(){t.turnFlag = true;return;});},getPrize : function(){var t = this;$('.getIt').hide();divPointer.style.webkitTransitionProperty = 'width';divPointer.style.webkitTransform = 'rotate(0deg)';divPointer.style.msTransitionProperty = 'width';divPointer.style.msTransform = 'rotate(0deg)';t.tels();},myAlert : function(title,text,btnText,fn,cls){$('.my_alert').hide();$('.my_alert_title').html(title);$('.my_alert_text').html(text);if(btnText == '') btnText = 'ok';$('.my_alert_btn input').val(btnText);$('.my_alert_btn input').click(function(){$('.my_alert').hide();fn();});if(cls == '' || cls == undefined){$('.my_alert').attr('class','my_alert');}else{$('.my_alert').attr('class','my_alert ' + cls);}$('.my_alert').show();},myPrompt : function(title,text,btnTextY,btnTextN,fnY,fnN){$('.my_prompt').hide();$('.my_prompt_title').html(title);//$('.my_prompt_text').html(text);if(btnTextY == '') btnTextY = 'ok';if(btnTextN == '') btnTextN = 'no';$('.my_prompt_btnY').val(btnTextY).click(function(){$('.my_prompt').hide();fnY();});$('.my_prompt_btnN').val(btnTextN).click(function(){$('.my_prompt').hide();fnN();});$('.my_prompt').show();}}win.disk = disk;})(window)2)优化版(实际应⽤)// JavaScript Document(function(win){var degDivide = 60;//各奖品旋转⾓度范围60°var prizeName;//奖品名称//奖品次序及奖品名称var prizeTypeArr = ['继续加油!','⼆等奖','参与奖','三等奖','继续加油!','⼀等奖'];//奖品编号var prizeTypeArrType = [0,1,2,3,4,5];//奖品范围开始度数var prizeTypeDegArr = [[0],[60],[120],[180],[240],[300]];//var prizeTypeDegArr = [[0,240],[60],[120],[180],[300]];var disk = {//初始化插件参数prizeType : 0,nowDeg : 0,willDeg : 0,weixinId : null,contentId : null,turnFlag : true,count : null,init : function(id,contentid,count,flag){var t = this;//点击指定原⽣,触发抽奖⽅法divPointer.onclick = function(){t.lottery();}},//抽奖⽅法实现lottery: function(){var t = this;var url = '/award/choice-award';$.post(url, {}, function(msg){if(msg == 'false'){alert('未中奖~');return;}//赋值奖品编号t.prizeType= msg;t._judge();});},//获取指针旋转⾓度数_judge: function(){var t = this,judgeArr = prizeTypeDegArr[t.prizeType],judgeArrLen = judgeArr.length;if(judgeArrLen == 1){//设置旋转圈数t.willDeg = 1800 + judgeArr[0] + 2 + (degDivide-4)*Math.random();prizeName = prizeTypeArr[t.prizeType];}else if(judgeArrLen > 1){var judgeArrRan =Math.floor(judgeArrLen * Math.random());t.willDeg = 1800 + judgeArr[judgeArrRan] + 2 + (degDivide-4)*Math.random();prizeName = prizeTypeArr[t.prizeType];}else{return;}t._turn();},//实现转盘旋转效果_turn : function(){var t = this;setTimeout(function(){divPointer.style.webkitTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)'; divPointer.style.webkitTransitionDuration = '2s'divPointer.style.webkitTransitionProperty = 'all';divPointer.style.webkitTransform = 'rotate('+ t.willDeg +'deg)';divPointer.style.msTransitionTimingFunction = 'cubic-bezier(.53,.3,.24,1.01)';divPointer.style.msTransitionDuration = '2s'divPointer.style.msTransitionProperty = 'all';divPointer.style.msTransform = 'rotate('+ t.willDeg +'deg)';},100);//转盘停⽌后操作setTimeout(function(){//未中奖显⽰if (t.prizeType == 0 || t.prizeType == 4) {alert('未中奖~');return false;} else {alert('中奖了~');}},2100)},}win.disk = disk;})(window)以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
js抽奖实现随机抽奖代码效果随机抽取,简单代码。
复制代码代码如下:<html><title>随机抽奖程序</title><head><meta http-equiv=Content-Type content="text/html; charset=gb2312"></head><body><script type="text/javascript">var alldata = "a,b,c,d,e"var alldataarr = alldata.split(",");var num = alldataarr.length-1 ;var timerfunction change(){document.getElementById("oknum").innerHTML = alldataarr[GetRnd(0,num)];}function start(){clearInterval(timer);timer = setInterval('change()',10);}function ok(){clearInterval(timer);document.getElementById("showresult").value=document.getElementById("oknum").innerText; }function GetRnd(min,max){return parseInt(Math.random()*(max-min+1));}</script><center><div id="oknum" name="oknum" >请单击开始</div><button onclick="start()" accesskey="s">开始</button><button onclick="ok()" accesskey="o">停⽌</button>您的选择是:<input type="text" id="showresult" value=""></center></body></html>。
本文实例为大家分享了js抽奖程序的编写代码,以及编写注意事项,感兴趣的小伙伴们可以参考一下代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简单抽奖(可用键盘)</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;margin:50px auto;background: red} .title{color: #fff;font-size: 30px;font-weight:700px;padding: 50px 0;text-align: center;height:40px;} .btm{text-align: center;padding:20px 0;} .btm a{display: inline-block;width: 120px;height:60px;line-height: 60px;background: #FEF097;margin:0 10px;text-decoration: none;} </style> <script> var data=['Iphone','Ipad','笔记本','相机','谢谢参与','充值卡','购物券'], timer=null,//定时器 flag=0;//阻止多次回车 window.onload=function(){ var play=document.getElementById('play'), stop=document.getElementById('stop'); // 开始抽奖 play.onclick=playFun; stop.onclick=stopFun; // 键盘事件 document.onkeyup=function(event){ event = event || window.event; // 回车键的code值:13 if(event.keyCode==13){ if(flag==0){ playFun(); flag=1; }else{ stopFun(); flag=0; } } } function playFun(){ var title=document.getElementById('title'); var play=document.getElementById('play'); clearInterval(timer); timer=setInterval(function(){ var random=Math.floor(Math.random()*data.length); title.innerHTML=data[random]; },60); play.style.background='#999'; } function stopFun(){ clearInterval(timer); var play=document.getElementById('play'); play.style.background='#FEF097'; } } </script></head><body> <div class="box"> <div class="title" id="title">淘家趣抽奖</div> <div class="btm"> <a href="javascript:;" id="play">开始</a> <a href="javascript:;" id="stop">停止</a> </div> </div></body></html>注意点: 1.随机数,取数组的其中一个;取0-n之间:Math.random()*(n+1)2.定时器,开始抽奖时要停止前面的一次抽奖,不然会定时器重叠3.按键操作,要判断是抽奖进行中,还是未开始,所有设置了变量flag 以上就是本文的全部内容,希望对大家的学习有所帮助。