10秒挑战 跑马灯 计算器的实现

十秒挑战小游戏的实现

注意：先引入vue.js
提示 ：vue.js的线上地址

内容

<div id="app">
        <div>{{msg}}</div>
        <button @click="start">开始</button>
        <button @click="end">结束</button>
        <button @click="reset">重置</button>
    </div>

脚本

var vm = new Vue({
        el: '#app',
        data: {
            msg: '0.00',
            num: '0.01',
            timer: null
        },
        methods: {
            // 点击开始
            start() {
                clearInterval(this.timer)
                this.timer = setInterval(() => {
                    this.msg = (Number(this.msg) + Number(this.num)).toFixed(2)
                }, 10)
            },
            // 暂停
            end() {
                // 清除定时器
                clearInterval(this.timer)
                // 判断是否等于10.00
                if (this.msg == 10.00) {
                    alert('Your Win')
                } else {
                    alert('Your Lose')
                }
            },
            // 重置
            reset() {
                // 清除定时器
                clearInterval(this.timer)
                // 归零
                this.msg = '0.00'
            }
        }
    })

跑马灯的实现 ：

内容

<div id="app">
        <button @click="run">跑起来</button>
        <button @click="stop">暂停</button>
        <div>{{msg}}</div>
    </div>

脚本

 var vm = new Vue({
        el: '#app',
        data: {
            msg: '一二三四五六七八九十',
            timer: null
        },
        methods: {
            run() {
                clearInterval(this.timer)
                this.timer = setInterval(() => {
                    var first = this.msg.substring(0, 1)
                    var end = this.msg.substring(1)
                    this.msg = end + first
                }, 200)
            },
            stop() {
                clearInterval(this.timer)
            }
        }
    })

计算器的实现

内容

 <div id="app">
        <input type="text" v-model:value="value1">
        <select name="" id="" v-model="value">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model:value="value2">
        <button @click="add">=</button>
        <input type="text" v-model:value="value3">
    </div>

脚本

 var vm = new Vue({
        el: '#app',
        data: {
            value1: '',
            value2: '',
            value3: '',
            value: '+'
        },
        methods: {
            add() {
                switch (this.value) {
                    case '+':
                        this.value3 = Number(this.value1) + Number(this.value2)
                        break;
                    case '-':
                        this.value3 = Number(this.value1) - Number(this.value2)
                        break;
                    case '*':
                        this.value3 = Number(this.value1) * Number(this.value2)
                        break;
                    case '/':
                        this.value3 = Number(this.value1) / Number(this.value2)
                        break;
                }
            }
        }
    })