jquery实现数字抽奖（版本1）

最新推荐文章于 2024-08-27 19:24:38 发布

听海Movie

最新推荐文章于 2024-08-27 19:24:38 发布

阅读量1.6k

点赞数

分类专栏： js应用

本文链接：https://blog.csdn.net/u011781769/article/details/50128563

版权

本文介绍了如何使用jQuery实现数字抽奖功能，包括设置抽奖个数和数字范围的页面，通过HTML和jQuery代码实现页面跳转及参数传递，详细展示了抽奖页面的HTML结构和jQuery代码，以及最终的抽奖效果预览。

摘要由CSDN通过智能技术生成

实现数字抽奖，首先给用户一个设置抽奖个数和抽奖数字范围的设置页面

STEP1：【HTML+Jquery代码】

此处需要用到jquery实现页面的跳转和参数传递

location.href = "/group/tool/choujiang?num="+num+"&min="+min+"&max="+max;

                    <!DOCTYPE html>
<span style="font-size:14px;"><html>
    <head>
        <? $this->load->view('meta'); ?>
        <script>
        require(["jquery", "bootstrap"], function($) {
            $(function() {
                $('#save').on('click', function() {
                    var num=$('input[name="form[num]"]').val();
                    var min=$('input[name="form[min]"]').val();
                    var max=$('input[name="form[max]"]').val();
                    location.href = "/group/tool/choujiang?num="+num+"&min="+min+"&max="+max;//jquery实现页面的跳转和参数传递
                }); 
            }); 
        });
        </script>
        <style>
            body{
                background-position: center;
                background-repeat: no-repeat;
                background-attachment: fixed;
            }
            .demo{width:800px; margin:60px auto;height:500px;position: relative;padding: 3% 0;}
            #roll{padding: 3% 0;} 
            .h1{font-size:6em;  color: #ffb400;margin-bottom: 10px;}
            .col-sm-3{ font-size:3.8em; color: #fff;}
            .col-sm-12{ font-size:4em; color: #fff; line-height: 2em;}
            .huge{font-size:8em; margin-top: 60px;}
            
            #save{color: #fff;font-size:1.5em; }
            #stop{display:none;color: red;} 
            #result{margin-top:20px; line-height:24px; font-size:16px; text-align:center} 
            .label{color:#fff;}
        </style>
        
    </head>
    <body background="http://school.guzheng.name/statics/img/choujiang.jpg">
        <div class="container-fluid">
        <div cl