JQUERY+HTML九宫格抽奖作业代码
2024-07-02 07:43:16
########################################################################################################################
# declare 吼吼吼！hohoho~~~~ 开始了开始了 #
# begin #
# 代码肌肉兄贵 ~~~~~~ { ] OH YEAH~~~ author:Vincent #
# ________ |^^\ } _____\ \ #
# \ ______ (_-__\ } ________\ 来到代码世界~展示我的超能力 #
# \ \ |____|____/ #
# [ } | __/__ / 祝小伙儿们看完文章后 #
# ^ ^ |__/__/ 工作顺利，吃啥啥没够儿~！ #
# 这里是ISO-8859-1 |__/__| 不要惹我，一拳从多线程给你打成hello world！ #
# 西欧字符集 ------> / \??/ \ 欢迎关注微信 2012letitgo2012 #
# 中文乱码！！！！ | | | | #
# \ / \ / #
########################################################################################################################前提
在网页上如果有会动，渐变的效果，那很炫酷。
上一个会动的抽奖代码：
来！上代码~~
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}#div1{width: 300px;height: 300px;margin: auto;/*border: 1px solid greenyellow;*/position: relative;}.aa{width: 80px;height: 80px;background-color: orange;text-align: center;line-height: 80px;font-size: 14px;color: white;position: absolute;} #div1-2{left: 100px;}#div1-3{left: 200px;}#div1-4{top: 100px;left: 200px;}#div1-5{top: 200px;left: 200px;}#div1-6{top: 200px;left: 100px;}#div1-7{top: 200px;}#div1-8{top: 100px;}#div1-9{top: 100px;left: 100px;background-color: greenyellow;}#div1-9:hover{cursor: pointer;}.sel{background-color: greenyellow;}</style><script type="text/javascript" src="js/jquery.js"></script></head><body><div id="div1"><div id="div1-1" class="aa">oppo手机</div><div id="div1-2" class="aa">小米pad</div><div id="div1-3" class="aa">充电宝</div><div id="div1-4" class="aa">U盘</div><div id="div1-5" class="aa">微波炉</div><div id="div1-6" class="aa">再来一次</div><div id="div1-7" class="aa">谢谢惠顾</div><div id="div1-8" class="aa">扫地机器人</div><div id="div1-9" class="aa">开始</div></div></body><!--<script>$(function(){const arr = ['#div1-1','#div1-2','#div1-3','#div1-4','#div1-5','#div1-6','#div1-7','#div1-8']function chouJiang(){alert("cc");// let randomNum = Math.floor(Math.random() * (arr.length-1 - 0 + 1) + 0)
// for (var i = 0; i < arr.length; i++) {
// $(arr[i]).addClass("sel");
// }setTimeout(chouJiang(),2000);}function zhuanLun(div){$("#div1-1").addClass("sel");}// function quxiaoZhuanlun()
// {
// $("#div1-1").removeClass("sel");
// }$("#div1-9").click(function(){
// $("#div1-1").addClass("sel");chouJiang();})})</script>--><script>arr = ['div1-1','div1-2','div1-3','div1-4','div1-5','div1-6','div1-7','div1-8']var div;var lastshow = "";var jiangPin = "";
// function ff(){
// alert("你黑少女了吗11111？")
// setTimeout( "ff()",5000);
// }
// setTimeout( "ff()",5000); //以毫秒为单位function getRandom(m,n){var num = Math.floor(Math.random()*(n - m + 1) + m)return num;}function chouJiang(){// alert("你黑少女了吗");var randomNum = getRandom(0,arr.length-1);if(8==arr.length){while(lastshow == arr[randomNum]){randomNum = getRandom(0,arr.length-1);}}div = document.getElementById(arr[randomNum]);jiangPin=div.textContent;
// alert(jiangPin);div.style.backgroundColor="greenyellow";c=setTimeout("cancel()",200);if(1==arr.length){
// alert(arr.length)
// alert(arr)lastshow = arr[randomNum];arr = ['div1-1','div1-2','div1-3','div1-4','div1-5','div1-6','div1-7','div1-8']}else{
// alert(arr.length)
// alert(arr)arr.splice(randomNum,1)}
// a=setTimeout( "chouJiang()",200);}b=setTimeout( "chouJiang()",100);function cancel(){
// alert("你黑少女了吗11111？")div.style.backgroundColor="orange";}function ff2(){
// alert("定时器清除");alert("恭喜 "+jiangPin);clearTimeout(a);clearTimeout(b);//清除定时器clearTimeout(c);}document.getElementById("div1-9").onclick=function(){ff2();}
// setTimeout( "chouJiang()",2000);// $("#div1-9").click(function(){$("#div1-1").addClass("sel");
// chouJiang();
// })</script>
</html>
效果，加了JQuey就是会动的了：
########################################################################################################################
# end; #
# 代码肌肉兄贵 ~~~~~~ { ] OH YEAH~~~ author:Vincent #
# ________ |^^\ } _____\ \ #
# \ ______ (_-__\ } ________\ 来到代码世界~展示我的超能力 #
# \ \ |____|____/ #
# [ } | __/__ / 祝小伙儿们看完文章后 #
# ^ ^ |__/__/ 工作顺利，吃啥啥没够儿~！ #
# 这里是ISO-8859-1 |__/__| 不要惹我，一拳从多线程给你打成hello world！ #
# 西欧字符集 ------> / \??/ \ 欢迎关注微信 2012letitgo2012 #
# 中文乱码！！！！ | | | | #
# \ / \ / #
########################################################################################################################JQUERY+HTML九宫格抽奖作业代码相关推荐
- 九宫格抽奖源代码php,原生javascript实现九宫格抽奖效果代码
本篇文章主要介绍了原生javascript实现九宫格抽奖效果代码.具有很好的参考价值.下面跟着小编一起来看下吧 效果图: 代码如下: *{margin:0;padding:0;} #container ...
- php jquery ajax九宫格抽奖,jQuery九宫格抽奖
插件描述:网页中常用的九宫格抽奖代码 更新时间:2017/2/16 下午6:56:04 更新说明: 1.代码进行了优化: 2.更新了实际项目中用到的ajax接口请求,案例中注释便于展示效果: 3.主要 ...
- php jquery ajax九宫格抽奖,php+jquery+ajax开发抽奖功能模块下载
php+jquery+ajax实现抽奖系统模块代码如下: 首页在抽奖前需要将所有人员的参与名单在屏幕上滚动显示,所以就用jquery实现了, 1. 参与名单将放在一个txt文件里面,我将放到 phon ...
- jQuery实现九宫格抽奖游戏
# 九宫格抽奖游戏 本项目在github [链接]([https://github.com/freya0608/squaredUp](https://github.com/freya0608/squa ...
- 微信html抽奖转盘代码,使用CSS3+jquery.js 实现微信抽奖转盘效果
最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 "CSS3"! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖jquery的动画效果插件, ...
- js框架jquery实现的幸运大转盘抽奖程序代码,兼容多种浏览器(Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Chrome)
博客目录 js框架jquery实现的幸运大转盘抽奖程序代码 实现功能截图 系统功能 使用技术 代码 写在最后 js框架jquery实现的幸运大转盘抽奖程序代码 本系统实现了一个幸运转盘抽奖,兼容多种浏 ...
- js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
原文:js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器 源代码下载地址:http://www.zuidaima.com/share/1779633798073344.htm 看到网页上有 ...
- html5 图片抽奖代码,html5实现九宫格抽奖可固定抽中某项奖品
原生js写的一个九宫格抽奖程序 (周末在家闲着也是闲着) 我写的这个抽奖是拿来整蛊我女朋友, 因为每次抽奖的结果都是同一个.. 哈哈哈哈哈哈哈哈哈哈哈哈哈 我会附上正常抽奖的的代码和固定只能抽到某一个 ...
- ivx平台开发——不用代码实现一个九宫格抽奖
原创公众号:bigsai 前言 上次说过在看一些关于0代码开发平台ivx,前一段时间忙完考试最近跟着教程0代码实现一个九宫格抽奖,哈哈哈感觉还是蛮强大的,懂点的人都知道可视化这个东西我们正常都是用一些 ...
最新文章
- python如何创建一个类_python （知识点：类）简单的创建一个类
- 现在企业会要求JAVA人员会怎样的技术呢？
- Confluence 6 重要缓存和监控
- 人脸识别安全吗？调查称六成受访者认为技术有被滥用趋势
- 如何进行良好的程序设计（1）
- Ajax提交打开新窗口，浏览器拦截处理；以及跨域问题
- eclipse mysql jdbc驱动_java – 如何将JDBC mysql驱动程序添加到Eclipse项目？
- [小技巧]快速生成验证码
- ios开发读取剪切板的内容_ios开发读取剪切板的内容_苹果隐私问题堪忧！多个iOS应用未经许可读取剪贴板......
- c与指针 从一个字符串中提取子串_python实现找出来一个字符串中最长不重复子串...
- 【对讲机的那点事】如何给4G全网通对讲机写号？
- 操作属性之修改样式属性
- query相关搜索词推荐
- 2021-10-21python中spilt函数的学习
- android获取网页接口JSON数据
- X-Mind8破解版
- “分众1000万美元收购网络打手论坛”—事件营销乎？
- 想看懂资管行业？不清楚有哪些资管产品怎么行！
- 光学红外雨量IFR202型传感器应用于智慧灌溉智能家居地质灾害等行业
- mysql 用idb文件恢复数据