代码下载:

vue2.zip

测试地址:

https://vue.magicbeans001.work/vue/fin2_1.html

代码内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/bootstrap-3.3.7.css" />
    <link rel="stylesheet" href="./css/animate.css" />
</head>
<style>
    #range{
        display: inline;
    }
</style>
<body>
<div id="app">
    <header>
        <div class="panel-body form-inline">
            <label>
                MIN:
                <input type="number" class="form-control" v-model="min" placeholder="最小值" @change="compareNum()">
            </label>

            <label>
                MAX:
                <input type="number"  class="form-control" v-model="max" placeholder="最大值" @change="compareNum()">
            </label>

            <label>
                生成个数:
                <input type="number"  class="form-control" v-model="num" min="1" max="10" placeholder="个数" @change="compareNum()">
            </label>
            <button class="btn btn-primary" @click="runAdd">生成带重复</button>
            <button class="btn btn-primary" @click="runRandom">生成不重复</button>
            <form>
                <h6>是否重复</h6><br>
                <input type="radio" name="sex" v-model="flag" value="1">可重复<br>
                <input type="radio" name="sex" v-model="flag" value="0">不重复<br>
                <button class="btn btn-primary" @click.prevent="run1">开始生成</button>
            </form>
        </div>
    </header>
    现在随机数范围为:{{min}}到{{max}}
    <br>
    最大值:
    <input id="range" type="range" v-model="min" :style="rangeSet" @change="compareNum()">
    <br>
    最小值:
    <input id="range" type="range" v-model="max" :style="rangeSet" @change="compareNum()">
    <br>
    <table >
        <tr v-for="item in list" :key="item">
            <td>{{item}}</td>
        </tr>
    </table>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            min:"0",
            max:"1",
            num:"1",
            flag:"1",
            list:["以下是随机的结果:","这是测试语句防止出错"],
            rangeSet:{display:'inline',min:0,max:1000,step:1,width:'25%'}
        },
        methods:{
            // Math.random();
            // 返回介于 0(包含) ~ 1(不包含) 之间的一个随机数
            // 1.  0-x之间的随机数:
            // Math.round(Math.random()*x);
            // 2.  x至y之间的随机数
            // Math.round(Math.random()*(y-x)+x);
            // 3.  1-x之间的随机数:
            // Math.ceil(Math.random()*x);
            addNum(){
                var ran=Math.random()*(this.max-this.min)+Math.floor(this.min)
                var ranNum=Math.round(ran)
                // console.log(ran)
                // console.log(ranNum)
                return ranNum;
            },
            run1(){
                if(this.flag==1){
                    this.runAdd()
                }else if(this.flag==0){
                    this.runRandom()
                }else{
                    alert("请勾选一个")
                    this.flag="1"
                }
            },
            runAdd(){
                console.log("runAdd()")
                this.list=["以下是随机的结果:"]
                for(var i=0;i<this.num;i++){
                    var ranNum=this.addNum()
                    this.list.push(ranNum)
                }
            },
            runRandom(){
                console.log("runRandom()")
                this.list=["以下是随机的结果:"]
                for(var i=0;i<this.num;i++){
                    var ranNum=this.addNum()
                    var flag=this.list.find((value) => { 
                        if(value == ranNum) { 
                            // console.log(value+"value")
                            // console.log(ranNum+"ranNum")
                            return true;
                        }else{
                            return false;
                        }
                    })
                    if(flag===undefined){
                        this.list.push(ranNum)
                    }else{
                        i--
                        continue;
                    }
                }
            },
            compareNum(){
                if(this.max<=this.min){
                    alert("最小值必须小于最大值")
                    if(this.max==0){
                        this.max++
                    }
                    this.min=this.max-1
                }
                if(this.num<1){
                    alert("你觉得我能生成负数个随机数?搁着虚空对线呢¿¿¿¿¿")
                    this.num=1
                }
                if(this.num>this.max-this.min){
                    alert("你这个数量都不够我随机数分的,过分了啊。直接给你改了")
                    this.num=this.max-this.min
                }
            }
        }
    })
</script>
</body>
</html>
最后修改:2020 年 10 月 21 日 12 : 11 AM
如果觉得我的文章对你有用,请随意赞赏