您的位置：首页 > Web前端 > JavaScript

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

2018-09-08 16:38 337 查看

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

<!--动态创建一个表格 要求各行变色-->
<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航