<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>--> <style type="text/css"> #main{ width: 900px; height: 900px; border: 3px solid pink; margin: 0 auto; } .yuan{ border-radius: 100%; float: left; } .dian{ border-radius: 100%; float: left; } img{ position: absolute; width: 800px; left: 25%; display: none; } </style> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function get16Color(){ var ys = "#"; for (var i = 0; i < 3; i++) { ys += Math.floor( Math.random()*16 ).toString(16) } return ys; } function getRGBColor(){ var ys = "rgb("; for (var i = 0; i < 3; i++) { ys += Math.floor( Math.random()*255 )+"," } ys = ys.substring(0,ys.length-1); ys += ")" return ys; } //全局变量控制关数 var level = 3; $(function(){ // 3*3 9 4*4 16 5*5 25 function guanka(gk){ // 下一关需要先清楚之前的 $("#main").empty() //需要有一个和别的不一样 var sjs = Math.floor( Math.random() * (gk*gk) ) for (var i = 0; i < gk*gk; i++) { if(i==sjs){ $("#main").append("<div class='dian'></div>") }else{ $("#main").append("<div class='yuan'></div>") } } //生成完毕圆圈后, 需要动态的设定 宽和高 var xs = 900/gk; $(".yuan").width(xs).height(xs).css("background-color",getRGBColor()) $(".dian").width(xs).height(xs).css("background-color",get16Color()) } guanka(level) $("#main").on("click",".dian",function(){ guanka(++level) }) $("#main").on("click",".yuan",function(){ if( confirm("失败了! 要继续吗?") ){ $("img").show() setTimeout(function(){ $("img").hide() },10000 ) }else{ level = 3 guanka(level) } }) }) </script> </head> <body> <img src="img/IMG_0621(20220416-113308).JPG"/> <div id="main"> </div> </body> </html>
jquery小游戏
于 2022-04-16 15:32:58 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)