Maison > Article > interface Web > Utilisez jQuery pour implémenter une simple loterie à grille de neuf carrés
Cet article présente principalement l'utilisation de jQuery pour implémenter une simple loterie à neuf carrés. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> table { width: 600px; height: 600px; border: 2px solid black; margin: 0 auto; border: 2px solid black; } table td { border: 2px solid black; width: 200px; text-align: center; } p { text-align: center; height: 10px; } span { color: red; } #star { /* background: gray; */ font-size: 20px; } .cj.back { background: orange; } div { height: 20px; text-align: center; } </style> </head> <body> <div> <p></p> <div id="last"></div> <table> <tr> <td id="c1">奖5元</td> <td id="c2">谢谢惠顾</td> <td id="c3">奖100元</td> </tr> <tr> <td id="c8">再抽一次</td> <td id="star">开始抽奖</td> <td id="c4">奖50元</td> </tr> <tr> <td id="c7">奖20元</td> <td id="c6">奖500元</td> <td id="c5">奖200元</td> </tr> </table> </div> <script src="./js/jquery-1.12.4.min.js"></script> <script> let s = 5; let time = setInterval(function () { $('p').html(`抽奖倒计时,还有<span>${s}</span>秒`); s--; if (s < 0) { clearInterval(time) $("#star").css({ background: "grey", "font-size": "24px" }) } }, 1000) $('#star').on('click', function () { let i = 0; let t = 0; let num = parseInt(Math.random() * 8 + 1) console.log(num) change = setInterval(function () { i++; if (i > 8) { i = 1; t++; } $('.cj').removeClass('back') $('#c' + i).addClass('back') if (t == 4) { if (i == num) { clearInterval(change) $('#last').html(`恭喜你中奖:${$('#c' + i).text()}`) } } }, 200) }) </script> </body> </html>Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Comment créer des paragraphes d'article pour changer la couleur d'arrière-plan via l'attribut jquery toggleClass()
À propos de la mise en œuvre de l'effet de séjour du carrousel JavaScript
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!