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

  ---