案例二十二:
评分控件V1,用一个单行5列的Table做评分控件,监听td的click事件
点击一个td的时候,将这个td及之前的td背景变为红色
之后的td背景变为白色。鼠标在评分控件上的时候,显示超链接形式的鼠标图标
<html>
<head>
<title></title>
<script type="text/javascript">
function indexOf(arr,element){
for(var i=0;i<arr.length;i++){
if(arr[i]==element){
return i;
}
}
}
function initEvent(){
var tableRating=document.getElementById("tableRating");
var tds=tableRating.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
var td=tds[i];
//td.οnclick=tdClick();
//td.οnclick=tdClick;
td.οnmοuseοver=tdClick;
td.style.cursor="pointer";
}
}
function tdClick(){
var tableRating=document.getElementById("tableRating");
var tds=tableRating.getElementsByTagName("td");
var index=indexOf(tds,this);
for(var i=0;i<=index;i++){
var td=tds[i];
td.style.background="red";
}
for(var i=index+1;i<tds.length;i++){
var td=tds[i];
td.style.background="white";
}
}
</script>
</head>
<body οnlοad="initEvent()">
<table id="tableRating">
<tr><td>★</td><td>★</td><td>★</td><td>★</td><td>★</td></tr>
</table>
</body>
</html>
案例二十三:
创建三个文本框,当光标离开文本框的时候
如果文本框为空,则将文本框背景色设置为红色
不为空为白色。
焦点进入控件的事件为onfocus,焦点离开控件的事件为onblur
<input type="text" οnblur="alert('失去焦点')"/>
<input type="text" οnfοcus="alert('得到焦点')"/>
<html>
<head>
<title></title>
<script type="text/javascript">
function initEvent(){
var inputs=document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var input=inputs[i];
input.οnblur=inputOnBlur;
}
}
function inputOnBlur(){
if(this.value.length<=0){
this.style.background="red";
}else{
this.style.background="white";
}
}
</script>
</head>
<body οnlοad="initEvent()">
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</body>
</html>
案例二十四:
网页开关灯
<html>
<head>
<title></title>
<style type="text/css">
.day{
background-color:white;
}
.night{
background-color:Black;
}
</style>
<script type="text/javascript">
function switchLight(){
var btnSwitch=document.getElementById("btnSwitch");
if(document.body.className=="day"){
document.body.className="night";
btnSwitch.value="开灯";
}else{
document.body.className="day";
btnSwitch.value="关灯";
}
}
</script>
</head>
<body class="night">
<input type="button" id="btnSwitch" value="开灯" οnclick="switchLight()">
</body>
</html>