JavaScript使用總結

JavaScript使用總結

以下均使用BootStrap，JQuery

<!-- Bootstrap -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

1.使用Js動態增加li到ul

ul

<div class="card text-center" style="margin-top: 40px">
            <h5 class="card-header">
                24Ponits Game
            </h5>
            <div class="card-body">
                <ul class="list-group" id="question_list">
                </ul>
            </div>
            <div class="card-footer text-muted" style="display:none" id="footer_result"></div>
        </div>

使用js動態增加js

function fillQuestion(i) {
            var li = ""
            li += '<li class="list-group-item">'
            li += '<div class="card text-left">'
            li += '<div class="card-header">'
            li += 'Qestion ' + (i + 1) + '.'
            li += '</div>'
            li += '<div class="card-body">'
            li += '<h5 class="card-title">' + listQuestion[i].join(', ') + '</h5>'
            li += '<div class="input-group mb-3">'
            li += '<input type="text" id="q' + i + '-input" class="form-control" placeholder="Please enter your answer" aria-label="Please enter your answer" aria-describedby="basic-addon2">'
            li += '<div class="input-group-append">'
            li += '<button id="q'+ i +'-button" class="btn btn-outline-secondary" type="button" "Values('+ i +')">Confirm</button>'
            li += '</div></div></div>'
            li += '<div class="card-footer text-muted">'
            li += '<div class="alert alert-primary" role="alert" style="display:none" id="q' + i + '-anwser_result_true"></div>'
            li += '<div class="alert alert-danger" role="alert" style="display:none" id="q' + i + '-anwser_result_false"></div>'
            li += '</div></div></li>'
            $('#question_list').append(li)
        }

說明：這個append一定要是完整的一個，append會自動把標籤補全。
例如：

$('#question_list').append('<li class="list-group-item">')

會顯示

導致混亂，所以要使用字符串拼接一個完整的再append

---

2.滾動到網頁最底部

function scrollToEnd(){
            var h = $(document).height()-$(window).height();
            $(document).scrollTop(h); 
        }

---

3.Js控制標籤隱藏與顯示，並向標籤中添加數據

HTML

<div class="card-footer text-muted" style="display:none" id="footer_result"></div>

JavaScript

$("#footer_result").show()
$("#footer_result").html('<div class="alert alert-dark" role="alert">Game Over. You got '+ ponits_scored +'<br>Your correct and effective answer<br>'+ get_24points.join('<br>') +' </div>')

---

4.modal 模態框的使用

我們使用js打開這個modal，button中需要
data-toggle="modal" data-target="#start_game"
其中這個data-target中，#後邊要與模態框modal的id一致

HTML

<button type="button" hidden="hidden" data-toggle="modal" data-target="#start_game"
        id="hid_btn_start_modal">Primary</button>
    <div class="modal" tabindex="-1" role="dialog" id="start_game">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Welcome to 24Pionts</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Rules:<br>We're going to pick four Numbers at random from 1 to 13, and you're going to have to
                        add, subtract, multiply and divide to get to 24, and you're only going to use each number once.
                        One point is awarded for correct answers given time.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="button_start_game">Start</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                        id="button_start_game_close">Close</button>
                </div>
            </div>
        </div>
    </div>

JavaScript

$("#hid_btn_start_modal").click();

然後怎麼回調關閉modal
JavaScript

$("#button_start_game").click(function () {
    //to do
    $("#button_start_game_close").click();
})

---

5.JQuery獲取input的值，獲取select的值，獲取選中的select的text

獲取input的值

HTML

<input type="text" class="form-control" id="modal_join_input_chatroom_password">

JavaScript

var input_password = $("#modal_join_input_chatroom_password").val()

獲取select的值

HTML

<select class="form-control" id="chat_room_select">
    <option value="123" selected="selected">xbw</option>
    <option value="321">bwx</option>
</select>

JavaScript

var password = $('#chat_room_select').val()

獲取選中的select的text

JavaScript

var channel = $('#chat_room_select option:selected').text();

---

6.JavaScript 獲取系統時間

Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //month
            "d+": this.getDate(), //day
            "H+": this.getHours(), //hour
            "m+": this.getMinutes(), //minutes
            "s+": this.getSeconds(), //seconds
            "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
            "S": this.getMilliseconds() //ms
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

調用

new Date().Format("yyyy-MM-dd HH:mm:ss")

---

7.按回車觸法事件

JavaScript

$('#send_button').keydown(function(event) {
		if (event.keyCode == 13) {
			//to do
		}
	});

---