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;
                }
            }
        }
    })