<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* table{ cursor:pointer } */
table {
cursor: url('imgs/Cff9.ico'), auto;
}
</style>
<script type="text/javascript">
function changeMouseDown(m){
//alert(m.innerHTML);
m.style.cursor = 'url(\'imgs/Cff14.ico\'),auto';
}
function changeMouseUp(m){
//alert(m.innerHTML);
m.style.cursor = 'url(\'imgs/Cff9.ico\'),auto';
}
function init() {
table = document.getElementById("table1");
for (var i = 0; i < 3; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < 3; j++) {
var td = document.createElement("td");
td.setAttribute("id", "td" + (i * 3 + j + 1));
td.addEventListener("click", function() {
check(this);
});
td.style.background = "";
td.innerHTML = "" + (i * 3 + j + 1);
tr.appendChild(td);
}
table.appendChild(tr);
}
}
window.onload = init;
function check(td) {
var c = td.innerHTML;
var scoreT = document.getElementById("score").innerHTML;
var score = parseInt(scoreT);
//if(td.style.background=="red"){
if (td.style.backgroundImage != "") {
document.getElementById("score").innerHTML = score + 1;
td.style.background = "";
}
}
var curTd = null;
setInterval(
function() {
if (curTd != null)
curTd.style.background = "";
var num = Math.floor(Math.random() * 9) + 1;
var idNum = "td" + num;
//document.getElementById(idNum).style.background="red";
document.getElementById(idNum).style.backgroundImage = "url('imgs/mouse1.jpg')";
curTd = document.getElementById(idNum);
}, 1000);
</script>
</head>
<body>
<div id="score">0</div>
<table style="width: 50%; height: 500px;" border="1" id="table1"
οnmοuseup="changeMouseUp(this)" οnmοusedοwn="changeMouseDown(this)">
</table>
</body>
</html>