js中鼠标点击事件实现随堂点名器（24）

随堂点名代码如下：（后面有注意和理解内容）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击按钮随机点名</title>
<style type="text/css">
#bodybj{
background:url(images.jpg)
no-repeat center top;
}
#box{
margin:auto;
width:660px;
font-size:66px;
height:94px;
color:#138eee;
text-align:center;
margin-top:200px;
}
#bt{
margin:auto;
width:200px;
text-align:center;
margin-top:75px;
color:#fff;
font-size:25px;
cursor:pointer;
}
</style>
<script type="text/javascript">
var namelist=[
"张三","李四","王五","贺六","孙九","赵十","刘一"];
var mytime=null;
function doit(){
var bt=window.document.getElementById("bt");
if(mytime==null){
bt.innerHTML="停止点名";
show();
}else{
bt.innerHTML="开始点名";
clearTimeout(mytime);
mytime=null;
}
}
function show(){
var box=window.document.getElementById("box");
//var num=Math.floor(Math.random()*100000)%namelist.length; 随机整数跟数组长度求余数，
//更容易理解的方式是：
var num=Math.floor(Math.random()*namelist.length);//结果一样的都是0到长度0之间的随机整数
box.innerHTML=namelist[num];
mytime=setTimeout("show()",20);
}
</script>
</head>
<body id="bodybj">
<div id="box">亲，准备好点名了吗？</div>
<div id="bt" onClick="doit()">开始点名</div>
</body>
</html>

鼠标单击事件(onclick)

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。

比如，我们单击按钮时，触发 onclick 事件，并调用两个数和的函数add2()。代码如下：

<html>

<head>

function add2(){

var numa,numb,sum;

numa=6;

numb=8;

sum=numa+numb;

document.write("两数和为:"+sum); }

</script>

</head>

<body>

<form>

</form>

</body>

</html>

注意: 在网页中，如使用事件，就在该元素中设置事件属性。

innerHTML

innerHTML在JavaScript中是双向功能：获取对象的内容或向对象插入内容；

如：<div id="aa">这是内容</div> ，

我们可通过过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；

也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容';

这样就能向id为abc的对象插入内容。

定义和用法

innerHTML 属性用于设置或返回指定标签之间的 HTML 内容。

语法

Object.innerHTML = "HTML";// 设置

var html = Object.innerHTML;// 获取

例子 1

获取段落p的 innerHTML（html内容）

<html>

<head>

function getInnerHTML(){

alert(document.getElementById("test").innerHTML);

}

</script>

</head><body>

<p id="test"><font color="#000">的说法伽师的噶</font></p>

</body>

</html>

例子 2

设置段落p的 innerHTML（html内容）

<html>

<head>

function setInnerHTML(){

document.getElementById("test").innerHTML = "<strong>设置标签的html内容</strong>";

}

</script>

</head><body>

<p id="test"><font color="#000">撒旦发射点风格</font></p>

</body>

</html>