<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 <html xmlns="http://www.w3.org/1999/xhtml"> 

 <head> 

     <title></title> 

     <script type="text/javascript"> 

           //验证按钮是否为空 

 //        window.onload = function () { 

 //            var inputs = document.getElementsByTagName("input"); 

 //            for (var i = 0; i < inputs.length; i++) { 

 //                if (inputs[i].type == "text") { 

 //                    inputs[i].onblur = function () { 

 //                        //失去焦点,this表示当前点击的对象 

 //                        if (this.value.length == 0) { 

 //                            this.style.backgroundColor = "red"; 

 //                        } 

 //                        else { 

 //                            this.style.backgroundColor = "white"; 

 //                        } 

 //                    }; 

 //                    inputs[i].onfocus = function () { 

 //                        if (this.value.lenth == 0) { 

 //                            this.style.backgroundColor = "white"; 

 //                        } 

 //                    }; 

 //                } 

 //            } 

 //        } 



         // 评分星星 

 //        window.onload = function () { 

 //            //1.给rating中的所有td注册事件 

 //            //2.给每一个td起索引（编号) 

 //            //3.变成实体星星 

 //            var tb = document.getElementById("rating"); 

 //            var tds = tb.getElementsByTagName("td"); 

 //            for (var i = 0; i < tds.length; i++) { 

 //                tds[i].style.cursor = "pointer"; 

 //                tds[i].id = i; 

 //                //给每一个td注册事件 

 //                tds[i].onmouseover = function () { 

 //                    //获取当前触发事件的编号 

 //                    var index = this.id; //获取的依然是字符串，需要转化 

 //                    //当然和之前的td 

 //                    for (var i = 0; i <= parseInt(index); i++) { 

 //                        tds[i].innerText = "★"; 

 //                    } 

 //                    //之后的td 

 //                    for (var i = parseInt(index) + 1; i < tds.length; i++) { 

 //                        tds[i].innerText = "☆"; 

 //                    } 

 //                }; 

 //            } 

 //        } 



         //选美女,选中的背景高亮显示 

 //        window.onload = function () { 

 //            var div = document.getElementById("mv"); 

 //            var links = div.getElementsByTagName("a"); 



 //            for (var i = 0; i < links.length; i++) { 

 //                links[i].onclick = function () { 

 //                    for (var i = 0; i < links.length; i++) { 

 //                        links[i].style.backgroundColor = "white"; 

 //                    } 

 //                    this.style.backgroundColor = "red"; 

 //                    return false; //不想让你跳转，只想让你高亮显示 

 //                } 

 //            } 

 //        } 

         //隔行变色 

 //        window.onload = function () { 

 //            var tb = document.getElementById("tb"); 

 //            var rows = tb.getElementsByTagName("td"); 

 //            for (var i = 0; i < rows.length; i++) { 

 //                //奇偶行不同色 

 //                if (i % 2 == 0) { 



 //                    rows[i].style.backgroundColor = "red"; 

 //                } 

 //                else { 

 //                    rows[i].style.backgroundColor = "green"; 

 //                } 



 //                //光棒效果 

 //                var bgColor; 

 //                rows[i].onmouseover = function () { 

 //                    bgColor = this.style.backgroundColor; 

 //                    this.style.backgroundColor = "yello"; 

 //                } 

 //                rows[i].onmouseout = function () { 

 //                    this.style.backgroundColor = bgColor; 

 //                } 

 //            } 

 //        } 

      

          //图片浏览器 

 //        window.onload = function () { 

 //            var json = [{ "name": "美女1", "url": "网页作业/家乡美/1.png" }, 

 //                        { "name": "美女2", "url": "网页作业/家乡美/2.png" }, 

 //                        { "name": "美女3", "url": "网页作业/家乡美/3.png" }, 

 //                        { "name": "美女4", "url": "网页作业/家乡美/4.png" } 

 //                        ]; 

 //            var div = document.getElementById("imgs"); 

 //            if (json.length > 0) { 

 //                var ul = document.createElement("ul"); 

 //                div.appendChild(ul); 

 //                //生成li 

 //                for (var i = 0; i < json.length; i++) { 

 //                    var li = document.createElement("li"); 

 //                    ul.appendChild(li); 

 //                    //动态创建a 

 //                    var link = document.createElement("<a href='" + json[i].url + "'></a>"); 

 //                    link.innerHTML = json[i].name; 



 //                    link.onclick = function () { 

 //                        var href = this.href; 

 //                        img.scr = href; 

 //                        //取消后续内容的执行 

 //                        return false; 

 //                    } 

 //                    li.appendChild(link); 

 //                } 



 //                //动态生成Image标签 

 //                var img = document.createElement("img"); 

 //                div.appendChild(img); 

 //            } 

 //        } 



         // 点击按钮 设置透明度 

          

         window.onload = function () { 

             document.getElementById("d1").style.filter = "alpha(opacity=100)"; 



         } 

         var num = 100; 

         function f1() { 

             if (num > 0) { 

                 num = num - 10; 

                 document.getElementById("d1").style.filter = "alpha(opacity=" + num + ")"; 

             } 

             else { 

                 alert("不能点了"); 

                  

             } 

         } 



     </script> 

     <style type="text/css"> 

          

         div 

         { 

             width:200px; 

             height:200px; 

             background-color:Red; 

             filter:alpha(opacity=100); 

         } 

     </style> 

      

 </head> 

 <body> 

     <!--验证按钮是否为空 

     <input type="text"/><br /> 

     <input type="text"/><br /> 

     <input type="text"/><br /> 

     <input type="text"/><br /> 

     <input type="text"/><br />--> 

     <!--评分星星 

     <table id="rating"> 

         <tr> 

             <td>☆</td> 

             <td>☆</td> 

             <td>☆</td> 

             <td>☆</td> 

             <td>☆</td> 

         </tr> 

     </table>--> 

     <!--选美女,选中的话高亮显示 

     <div id="mv"> 

         <a href="">西施</a> 

         <a href="">贵妃</a> 

         <a href="">貂蝉</a> 

         <a href="">昭君</a> 

     </div>--> 

      

     <!--隔行变色，高亮显示 

     <table id="tb" border="1"> 

         <tr> 

             <td> 

             1111111111111111 

             </td> 

         </tr> 

         <tr> 

             <td> 

             2222222222222222 

             </td> 

         </tr> 

         <tr> 

             <td> 

             3333333333333333 

             </td> 

         </tr> 

         <tr> 

             <td> 

             4444444444444444 

             </td> 

         </tr> 

     </table>--> 

      

     <!--图片浏览器 

     <div id="imgs"> 

          

     </div>--> 

     <!--点击按钮 设置透明度--> 

     <div id="d1"> 

     </div> 

     <input type="button" value="click" οnclick="f1()"/> 

 </body> 

 </html>