简单js函数应用（动态表格创建+按键控制npc移动）

本文链接：https://blog.csdn.net/qq_42275455/article/details/82530788

动态创建一个表格要求单双行变色

<!--动态创建一个表格 要求各行变色-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

    </style>
</head>
<body>
    <p>请输入单行导航栏背景色:</p>
    <p>数值一：<input id="aa" type="text"></p>
    <p>数值二：<input id="bb" type="text"></p>
    <p>数值三：<input id="cc" type="text"></p>
    <p>请输入双行导航栏背景色:</p>
    <p>数值一：<input id="aaa" type="text"></p>
    <p>数值二：<input id="bbb" type="text"></p>
    <p>数值三：<input id="ccc" type="text"></p>
    <p>请输入行数:<input id="hang"></p>
    <p>请输入列数:<input id="lie"></p>
    <button onclick="autocreate()">创建</button>
<script type="text/javascript">
    function autocreate(){
    var h=document.getElementById("hang").value;
    var l=document.getElementById("lie").value;
    var tab = document.createElement("table");
    // tab.style.margin = "0 auto";
    // tab.style.width = "500px";
    var tb = document.createElement("tbody");
    tab.appendChild(tb);
    for(var i = 0; i < h; i++){
        var row = tb.insertRow(tb.rows.length);
        for(var j = 0; j < l; j++){
            var col = row.insertCell(row.cells.length);
            col.style.width = "50px";
            col.style.height = "50px";
            if (i%2==0) {var a = document.getElementById('aa').value;
            var b = document.getElementById('bb').value;
            var c = document.getElementById('cc').value;
            col.style.backgroundColor = "rgb(" + a + "," + b + "," + c + ")";}
            if (i%2!=0) {
            var a = document.getElementById('aaa').value;
            var b = document.getElementById('bbb').value;
            var c = document.getElementById('ccc').value;
            col.style.backgroundColor = "rgb(" + a + "," + b + "," + c + ")";
            }
        }
    }
    document.body.appendChild(tab);
}
</script>
</body>
</html>

js （switch…case）控制npc移动

<!--wasd按键控制上下左右移动-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <!--  <style type="text/css">
        #div1{
          position: absolute;
          left: 100px;
          top: 100px;
          border: 1px solid red;
            background-color: green;
            width: 100px;
            height: 100px;
            /*border-radius:50px;*/
        }
    </style>  -->
</head>
<body>
  <div id="div1" style=" position: absolute;
          left: 100px;
          top: 100px;
          border: 1px solid red;
            background-color: green;
            width: 100px;
            height: 100px;"></div>
  <!-- <div id="div" style="width: 100px;height: 100px;position: absolute;left: 100px;top: 100px;border: 1px solid red;background-color: red;"></div> -->
<script type="text/javascript">
 var div2=document.getElementById('div1');
document.onkeydown=function(e){
switch(e.keyCode){
case 65:
div2.style.left=parseInt(div2.style.left)-100+"px";
break;
case 68:
div2.style.left=parseInt(div2.style.left)+100+"px";
break;
case 83:
div2.style.top=parseInt(div2.style.top)+100+"px";
break;
case 87:
div2.style.top=parseInt(div2.style.top)-100+"px";
break;
case 37:
div2.style.left=parseInt(div2.style.left)-100+"px";
break;
case 39:
div2.style.left=parseInt(div2.style.left)+100+"px";
break;
case 40:
div2.style.top=parseInt(div2.style.top)+100+"px";
break;
case 38:
div2.style.top=parseInt(div2.style.top)-100+"px";
break;
}
}
</script>
</body>
</html>