转盘抽奖

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
    <title></title>
  <style>
       .dialWrap { position:absolute; left:50%; top:24px; width:460px; height:460px; margin-left:-246px; }
       .dialWrap .dial { position:relative; z-index:1; width:100%; height:100%; background:url(sprite.png) no-repeat -200px 0; }
       .dialWrap .dialBtn { position:absolute; z-index:2; left:50%; top:50%; width:121px; height:154px; margin:-95px 0 0 -60px; background:url(sprite.png) no-repeat 0 -150px; cursor:pointer; }
      .dialWrap .dialBtn .text { position:absolute; left:50%; top:50%; width:57px; height:63px; margin:-18px 0 0 -28px; background:url(sprite.png) no-repeat 0 -400px; }
  </style>
  </head>
<body>
     <div class="dialWrap">
      <div class="dial" id="dial"></div>
         <div class="dialBtn" id="dialBtn">
        <p class="text"></p>
       </div>
      </div>
<script type="text/javascript" src="lib2/jquery-2.2.3.min.js" ></script>
<script type="text/javascript" src="lib2/jQueryRotate.2.2.js" ></script>
<script type="text/javascript">
  var data
    $(function(){
      var rotateFunc=function(awards,angle,text){
        $("#dial").stopRotate();
        $("#dial").rotate({
          angle:0,
          animateTo:angle+1440,
          duration:4000,
          callback:function(){
            alert(text)
          }
         })
      }
    $("#dialBtn").rotate({
      bind:{
        click:function(){
          data = [1,2,3,4,5,6,7,8]; //返回的数组
          data = data[Math.floor(Math.random()*data.length)];
          if(data==1){
            rotateFunc(1,337.5,'恭喜您抽中的四等奖')
          }
          if(data==2){
            rotateFunc(2,292.5,'恭喜您抽中的三等奖')
          }
          if(data==3){
            rotateFunc(3,247.5,'恭喜您抽中的二等奖')
          }
          if(data==4){
            rotateFunc(4,202.5,'恭喜您抽中的四等奖')
          }
          if(data==5){
            rotateFunc(5,157.5,'恭喜您抽中的三等奖')
          }
          if(data==6){
            rotateFunc(6,112.5,'恭喜您抽中的二等奖')
          }
          if(data==7){
            rotateFunc(7,67.5,'恭喜您抽中的一等奖')
          }
          if(data==8){
            rotateFunc(8,22.5,'恭喜您抽中的二等奖')
          }
        }
      }

    })
  })
</script>
</body>
</html>

转载于:https://www.cnblogs.com/xcbk/p/7100808.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/572261.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux软连接

软链接就理解为Windows的快捷方式&#xff0c;因为某些文件和目录的路径很深, 所以需要增加软链接(快捷方式)使用者权限&#xff1a;所有用户 语法&#xff1a; ln -s 目标文件绝对路径 快捷方式路径# 把b.txt的软连接生成到桌面 ln -s aaa/bb/c/b.txt b.txt

设计模式之 - 代理模式(Proxy Pattern)

代理模式&#xff1a;代理是一种常用的设计模式&#xff0c;其目的就是为其他对象提供一个代理以控制对某个对象的访问。代理类负责为委托类预处理消息&#xff0c;过滤消息并转发消息&#xff0c;以及进行消息被委托类执行后的后续处理。很多可以框架中都有用到&#xff0c;比…

Linux压缩命令

gizp&#xff1a; gizp用来压缩/解压缩文件&#xff0c;不能压缩目录&#xff0c;gzip是个使用广泛的压缩程序&#xff0c;文件经它压缩过后&#xff0c;其名称后面会多出".gz"的扩展名windows下接触的压缩文件大多是.rar&#xff0c;.7z格式&#xff0c;Linux下&…

1-3、nav元素

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>nav</title> </head> <body><h1>技术资料</h1><nav><ul><li><a href"#">主页</a></li>&…

scala 基础十一 scala 中的trait特质

1.Scala类型系统的基础部分是与Java非常相像的。Scala与Java一样有单一的根类&#xff0c;Java通过接口来实现多重继承&#xff0c;而Scala则通过特征(trait)来实现&#xff08;Scala的特征可以包含实现代码&#xff0c;这当然是与Java接口不同的。不过由于特征自己具有类型的功…

yum命令怎么使用

概念&#xff1a; yum&#xff08; Yellow dog Updater, Modified&#xff09;是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器。yum就像手机里的应用商店一样&#xff0c;提供了查找、安装、删除某一个、一组甚至全部软件包的命令&#xff0c;而且命令简洁而又好记。…

Bluetooth Obex

OPP 1.2 which uses OBEX over L2CAP.OPP 1.1 connection and transfer happens over RFCOMM->L2CAP.转载于:https://www.cnblogs.com/feliz/p/7122327.html

JavaEE规范与系统结构

JavaEE规范&#xff1a; JavaEE规范是J2EE规范的新名称&#xff0c;早期被称为J2EE规范&#xff0c;其全称是Java 2 Platform Enterprise Edition&#xff0c;它是由SUN公司领导、各厂家共同制定并得到广泛认可的工业标准&#xff08;JCP组织成员&#xff09;。之所以改名为Jav…

HTTP协议和NDS服务器

HTTP协议&#xff1a; HTTP的全称是&#xff1a;Hyper Text Transfer Protocol&#xff0c;意为超文本传输协议。它指的是服务器和客户端之间交互必须遵循的一问一答的规则。形容这个规则&#xff1a;问答机制、握手机制。它规范了请求和响应内容的类型和格式。HTTP协议是由W3C…

net 中web.config一个配置文件解决方法 (其他配置文件引入方式)

近期一个项目需要写许多的配置项&#xff0c;发现在单个web.config里面写的话会很乱也难于查找 所以搜了一下解决了&#xff0c;记录下来 一、 webconfig提供了引入其他config的方式 <connectionStrings configSource"Configs\database.config" /> 这个是连接…

Servlet方法详解

Servlet&#xff1a; Servlet是SUN公司提供的一套规范&#xff0c;名称就叫Servlet规范&#xff0c;它也是JavaEE规范之一。使用JavaEE的API。目前在Oracle官网中的最新版本是JavaEE8&#xff0c; Servlet是一个运行在web服务端的java小程序它可以用于接收和响应客户端的请求要…

继承的实现原理

一.继承的实现原理 1.继承顺序 1.1单独分叉线路&#xff1a;经典类与新式类依次从左到右&#xff0c;深度优先 1.2多条重合线路&#xff1a;经典类一路到头&#xff0c;深度优先&#xff1b;新式类&#xff0c;广度优先。<参考MRO列表&#xff0c;仅在新式类有> class A(…

Python自动化之列表

##将首字母改成大写# name alex# v name.capitalize()# print(v)##将首字母改成小写# name Alex# v name.casefold()# print(v)###传一个值&#xff0c;两边补的是添加的字符# name Alex# v name.center(20,*)# print(v)##统计字符串出现的次数# name Alex# v name.cou…

Request请求

Request请求&#xff1a; Request请求&#xff0c;就是客户端希望从服务器端获取资源&#xff0c;向服务器发出询问。在B/S架构中&#xff0c;就是客户浏览器向服务器发出询问。在我们的JavaEE工程中&#xff0c;客户浏览器发出询问&#xff0c;要遵循HTTP协议所规定的。请求对…

MySQL编程基础

本文是关于MySQL编程中的一些基础知识&#xff0c;包括变量和运算符、常用语句、函数。 一、变量与运算符 1.用户会话变量声明&#xff1a;SET 变量名 表达式;//即&#xff1a;用户会话变量无需提前定义&#xff0c;直接用赋值语句赋值&#xff0c;就算是定义了&#xff08;也…

Response响应方法详解

Response&#xff1a; 响应&#xff1a;服务器把请求的处理结果告知客户端。在B/S架构中&#xff0c;响应就是把结果带回浏览器。响应对象&#xff1a;在项目中用于发送响应的对象 常用状态码&#xff1a; 状态码说明200执行成功302它和307一样&#xff0c;都是用于重定向的状…

perl6 HTTP::UserAgent (2)

http://www.cnblogs.com/perl6/p/6911166.html 之前这里有个小小例子&#xff0c; 这里只要是总结一下。 HTTP::UserAgent包含了以下模块: ---------------------------------------------------------------------------------------------- Module |Path-Nam…

Java会话技术

会话技术&#xff1a; 会话指的是客户端浏览器和服务端之间的度偶次请求和响应当打开浏览器&#xff0c;访问网站地址后&#xff0c;会话开始&#xff0c;当关闭浏览器&#xff08;或者到了过期时间&#xff09;&#xff0c;会话结束。就像打电话只要不挂电话就是一次会话。 会…

【调用IP宏文件进行仿真】modelsim仿真时出现 Instantiation of 'xxx' failed. The design unit was not found....

出现错误类似&#xff1a;modelsim 仿真fifo时出现 Error: (vsim-3033) E:/Programs/ModelSim/fifo/ps2_fifo.v(75): Instantiation of scfifo failed. The design unit was not found.仿真波形不对&#xff0c;调用的ip核没有输出&#xff08;白色虚线&#xff09;等情况&…

Java Server Page

JSP JSP全称是Java Server Page&#xff0c;基于Java和Servlet一样是sun公司推出的一套开发动态web资源的技术&#xff0c;称为JSP/Servlet规范。JSP的本质其实就是一个Servlet。jsp是一种动态网页技术标准&#xff0c;jsp部署在服务器上可以处理客户端的请求&#xff0c;并根据…