---
tags: JS 的奇妙旅程
---

# JS 的奇妙旅程-toggle效果、猜拳、擲骰子、前端資料庫實作

## 紅藍箱子切換

設定紅藍2種class，再利用`classList + toggle()`新增移除class

var boxA=document.querySelector('#box');
var classes=boxA.classList;
boxA.onclick=function(){
var result=classes.toggle('b')
if(result){
     document.querySelector('#box').classList.add('b');
      }else{
      document.querySelector('#box').classList.remove('b');
            }
          }  

試試看
https://codepen.io/borisddqd2/pen/yLpJapP

## 猜拳

剪刀石頭布
流程拆解分析
1.玩家出牌，點選剪刀、石頭、布的按鈕
2.點腦亂數出剪刀、石頭、布
3.利用流程控制(贏、輸、平手)比較結果，輸出顯示結果
程式碼如下

## 骰子遊戲

### 流程

    <div class="output"></div>
    <button onclick="play_dice()">擲骰子</button>
    <script>
      var x, y, x;
      function getRandomInt(max) {
        return Math.floor(Math.random() * 5) + 1;
      }
      function play_dice() {
        var counts=0;
        var output=document.querySelector('.output')
        output.innerHTML="";
        do{
        x = getRandomInt(6);
        y = getRandomInt(6);
        z = getRandomInt(6);
        counts++
        output.innerHTML+=`
        <span>${x},${y},${z},</span><br>`
        console.log(x,y,z,counts)
        }while(x !== y || y !== z || x !== z)
        output.innerHTML+=`總共丟了${counts}次`
      }
    </script>

線上看:https://codepen.io/borisddqd2/pen/VwyMXoR

## 前端資料庫


HTML

    <div>
        姓名:<input type="text" id="name">
        年齡:<input type="text" id="age">
        性別:<input type="text" id="gender">
        功能:<input type="text" id="work">
        <button onclick="search()">查詢</button>
        <button onclick="add_new()">增加</button>
        <button onclick="show()">顯示</button>
        <button onclick="reset()">清空資料庫</button>
     
    </div>
    <table>
        <thead>
            <tr>
                <th>姓名 &nbsp;&nbsp;&nbsp;</th>
                <th>年齡 &nbsp;&nbsp;&nbsp;</th>
                <th>性別 &nbsp;&nbsp;&nbsp;</th>
                <th>功能 &nbsp;&nbsp;&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

---
JavaScript

  <script>
        var name_1=document.querySelector('#name');
        var age=document.querySelector('#age');
        var gender=document.querySelector('#gender');
        var work=document.querySelector('#work');
        var tbody=document.querySelector('tbody');
        var data=[];
        var new_data={};
        //增加
        function add_new(){
            if(name_1.value==''||age.value==''||gender.value==''||work.value==''){
                alert('輸入欄位不可為空')
            }else{
                new_data={
                name:name_1.value,
                age:age.value,
                gender:gender.value,
                work:work.value
            }
            data.push(new_data);
            console.log(data);
            show();
            }
           
        }
        //顯示
        function show(){
            tbody.innerHTML='';
            data.forEach((data,index)=>{
            tbody.innerHTML+=`
                <tr>
                <td>${data.name}</td>
                <td>${data.age}</td>
                <td>${data.gender}</td>
                <td>${data.work}</td>
                <td><button class="delete-btn" data-index=${index} onclick="delete_data(${index})">刪除</button></td>
                </tr>
                `
            }
            )
           
        }
        //刪除-麻煩的寫法
        // function delete_data(){
        //     data.forEach((del_btn)=>{
        //         del_btn.addEventListener('click',
        //         function(){
        //             var index=del_btn.getAttribute('data-index')
        //             data.splice(index,1)
        //         }
        //         )
        //     })
        // }

        //刪除
        function delete_data(index){
            data.splice(index,1);
            show();//重新渲染在畫面上
        }
        //清空資料庫
        function reset(){
            data=[];
            show();
        }
        //查詢
        function search(){
            for(var i=0;i<data.length;i++){
                if(data[i].name==name_1.value){
                    alert('找到了')
                    
                // tbody.innerHTML=`
                // <tr>
                // <td>${data.name}</td>
                // <td>${data.age}</td>
                // <td>${data.gender}</td>
                // <td>${data.work}</td>
                // </tr>
                // `
                break;

                }else{
                    alert('找不到')
                    break;
                }
            }
        }
    </script>

線上看範例
https://codepen.io/borisddqd2/pen/YzYraBg

## 參考資料
https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle