示例 1 onmousedown, onmouseup
<script>
function textcolor(cursor, i){
if(i ==0)
cursor.style.color ="#0000FF";
else
cursor.style.color ="#E7D745";
}
</script>
<h2 onmouseup="textcolor(this,1)"
onmousedown="textcolor(this,0)">
按下、松开颜色改变的文本
</h2>
示例 2 onmouseover,onmouseout
<script>
function changeImage(img, i){
if(i ==0)
img.src ="images/temp0.jpg";
else
img.src ="images/temp1.jpg";
}
</script>
<img src="images/temp0.jpg" border="0" width="200" height="220"
onmouseOver="changeImage(this,1)"
onmouseOut="changeImage(this,0)">
示例3 计数器(countdown)
<div id="container">
<div id="inputArea">
</div>
<h1 id="time">0:00</h1>
</div>
<script>
// two global variables
var secondsRemaining;
var intervalHandle;
function resetPage(){
document.getElementById("inputArea").style.display ="block";
}
function tick(){
// grab the h1
var timeDisplay = document.getElementById("time");
// turn seconds into mm:ss
var min =Math.floor(secondsRemaining /60);// floor功能: 返回比参数小的最大整数
var sec = secondsRemaining -(min *60);
// add a leading zero (as a string value) if seconds less than 10
if(sec <10){
sec ="0"+ sec;
}
// concatenate with colon
var message = min +":"+ sec;
// now change the display
timeDisplay.innerHTML = message;
// stop if down to zero
if(secondsRemaining ===0){
alert("Done!");
clearInterval(intervalHandle);
resetPage();
}
// subtract from seconds remaining
secondsRemaining--;
}
function startCountdown(){
// get contents of the "minutes" text box
var minutes = document.getElementById("minutes").value;
// check if not a number
if(isNaN(minutes)){
alert("Please enter a number!");
return;
}
// how many seconds?
secondsRemaining = minutes *60;
// every second, call the "tick" function
intervalHandle = setInterval(tick,1000);
// hide the form
document.getElementById("inputArea").style.display ="none";
}
// as soon as the page is loaded...
window.onload =function(){
// create input text box and give it an id of "minutes"
var inputMinutes = document.createElement("input");
inputMinutes.setAttribute("id","minutes");
inputMinutes.setAttribute("type","text");
// create a button
var startButton = document.createElement("input");
startButton.setAttribute("type","button");
startButton.setAttribute("value","Start Countdown");
startButton.onclick =function(){
startCountdown();
};
// add to the DOM, to the div called "inputArea"
document.getElementById("inputArea").appendChild(inputMinutes);
document.getElementById("inputArea").appendChild(startButton);
};
</script>
时间: 2024-10-27 12:42:51