在网页中创建自己的调试控制台
<html>
<head>
<title>caller</title>
<script type="text/javascript">
function DebugConsole(){ //调试对象构造函数
var consoleElem=document.createElement("div"); //创建一个div元素
consoleElem.id="debug";
consoleElem.style.fontFamily="monospace";
consoleElem.style.color="#333333";
document.body.appendChild(consoleElem); //将上面创建的div元素加到body中去
consoleElem.appendChild(document.createElement("hr")); //创建一条水平线
this.shaded=false; //相隔调试行颜色不同
}
DebugConsole.prototype.displayMsg=function(msg){ //类方法，在调试对象下不断创建新的div，增加调试信息
var msgElement=document.createElement("div");
msgElement.appendChild(document.createTextNode(msg));
msgElement.style.backgroundColor=this.shaded?"#EEEEEE":"#FFFFFF";
var consoleElem=document.getElementById("debug");
consoleElem.appendChild(msgElement);
this.shaded=!this.shaded;
}
var callNum=0;
var console; //此处不能用new来创建实例，因为在网页加载时，标头是先加载的，暂时还不能访问html中的元素
function checkWinner(form,caller,winningNum){
++callNum;
console.displayMsg("callNum: "+callNum); //输出调试信息
if(callNum==winningNum){
alert(caller+",caller number "+callNum+ "...today's winner");
form.submit();
}
else{
var callerField=document.getElementById('caller');
callerField.value="Next caller"; //将input域更新为固定值，并且聚焦和选定
callerField.focus();
callerField.select();
}
}
</script>
</head>
<body onload="console=new DebugConsole();"> //网页加载时创建DebugConsole对象，做调试控制台，网页元素要到onload事件触发的前一刻才完成创建
<form name="callform" method="post">
Caller name:<input id="caller" name="caller" type="text" />
<input type="button" value="Call" onclick="checkWinner(this.form,document.getElementById('caller').value,7)" /> //第7个人胜出
</form>
</body>
</html>
时间： 2024-07-30 20:41:41