编程语言之JavaScript基础及案例

js
案例之:鼠标移动事件跟踪


<script type="text/javascript">
document.onmousemove =function() { //当鼠标移动式获取当前x,y坐标值
var x = window.event.clientX;
var y = window.event.clientY;
//window.event.offsetX;
var f = document.getElementById("fly"); //取到id为fly的标签内容赋值于f
if (!f) { //如果没有取到,则返回
return;
}
f.style.left = x; //否则将f的坐标设为鼠标坐标值x,y
f.style.top = y;
}
</script>
<div id="fly" style="position: absolute">
<br />
哈哈!我会飞!<br />
<img src="20150313100438.jpg"/>
</div>

案例之:无刷新评论


<script type="text/javascript">
function pl() {
var nickname = document.getElementById("nickname").value;
var input = document.getElementById("comm").value;

var table = document.getElementById(“table”); //创建表格
var tr = document.createElement(“tr”); //创建新行

var Nickname = document.createElement(“td”); //创建昵称单元格
Nickname.innerText = nickname;
tr.appendChild(Nickname); //添加到新行

var Comm = document.createElement(“td”); //创建评论单元格
Comm.innerText = input;
tr.appendChild(Comm); //添加到新行

table.tBodies[0].appendChild(tr); //将新行添加到表格中的tbody中,tBodies:一个表格允许有多个tbody。

}
</script>

<table id=”table”>
<tbody>
</tbody>
</table>
昵称:<input id=”nickname” type=”text”/><br /><br />
评论:<textarea id=”comm”></textarea><br /><br />
<input id=”input” type=”button” value=”提交” onclick=”pl()”/>

案例之:点击改变标签内容

<script type="text/javascript">
function appear(cs) {
if (cs===1)
document.getElementById("a1").innerHTML="变量";
else if (cs===2)
document.getElementById("a2").innerHTML="函数";
else if (cs==3)
document.getElementById("a3").innerHTML="对象";
else if (cs==4)
document.getElementById("a4").innerHTML="属性";
else if (cs==5)
document.getElementById("a5").innerHTML="方法";
}
</script>

<table>
<tr>
<td width=”120″ bgcolor=”#ccc” id=”a1″ onclick=”appear(1)”>?</td>
<td width=”120″ bgcolor=”#ccc” id=”a2″ onclick=”appear(2)”>?</td>
<td width=”120″ bgcolor=”#ccc” id=”a3″ onclick=”appear(3)”>?</td>
<td width=”120″ bgcolor=”#ccc” id=”a4″ onclick=”appear(4)”>?</td>
<td width=”120″ bgcolor=”#ccc” id=”a5″ onclick=”appear(5)”>?</td>
</tr>
</table>

发表评论