• Day4-----score


    //--------------------------使用遍历完成星星的评分,使用innerHTML完成评价
    
    <html>
    <head><title>score</title></head>
    <style type="text/css">
        body{font-size: 20px;font-weight: bold;}
        img{ 30px;height: 30px;}
        li{list-style-type: none;float: left;}
        #text{ 100px;height: 30px;border: 1px solid #CCC;float: left;text-align: center;}
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var i;
            var timer;
            var text=["terrible","bad","normal","good","great"];
            oImg=document.getElementsByTagName('img');
            oDiv=document.getElementById('text');
            for(i=0;i<oImg.length;i++){
                oImg[i].src="pic/gray.png";    
                oImg[i].index=i;        
                oImg[i].onmouseover=function(){    
                    for(i=0;i<oImg.length;i++) oImg[i].src="pic/gray.png";    
                    for(i=0;i<(this.index+1);i++)    oImg[i].src="pic/gold.png";
                    oDiv.innerHTML=text[this.index];
                }
                oImg[i].onclick=function(){
                    for(i=0;i<(this.index+1);i++) oImg[i].src="pic/gold.png";
                }
            } 
            
        }
    </script>
    <body>
        <ul>
            <li><img /></li>
            <li><img /></li>
            <li><img /></li>
            <li><img /></li>
            <li><img /></li>
            <div id="text">Score</div>
        </ul>
    </body>
    </html>
  • 相关阅读:
    php对数字进行万。亿的转化
    新jdbc的应用
    3.8web网页设计的一篇作业
    我的新博客
    面向对象编程概念简述
    JS函数基本介绍
    JS中的变量和数据类型
    js语法基础
    父级塌陷清除浮动的五种方法
    flex布局
  • 原文地址:https://www.cnblogs.com/fleshy/p/4116380.html
Copyright © 2020-2023  润新知