zoukankan      html  css  js  c++  java
  • javascript实现模仿迅雷电影评分

    效果图:




    代码:

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    *{ margin:0; padding:0;}
    #mark{ margin:200px auto;height:50px; 300px;/* border:#CCC 1px solid;*/ position:relative;}
    #mark ul{ height:100%; 100%;}
    ul li{ list-style:none; height:40px; 40px; cursor:pointer; margin:0px; display:block; float:left;background:url(images/star.png) no-repeat 0 0;}
    p{ padding:8px;height:25px; 74px; border:#CCC 1px solid; display:none; position:absolute; left:210px; top:0px; line-height:25px; font-size:14px; font-family:"微软雅黑"; text-align:center;}
    .active{ background-image:url(images/star.png); background-position:0 -40px;}
    span{
    display: none;
    height: 0;
    0;
    }
    .left{
    position: absolute;
    border-color: transparent #CCC transparent transparent;
    border-style:solid;
    border-8px;
    left:195px;
    top:15px;
    }
    .right{
    position: absolute;
    border-color: transparent #FFF transparent transparent;
    border-style:solid;
    border-8px;
    left: 196px;
    top:15px;
    }
    </style>
    <script type="text/javascript">
    var optxt=['很差','较差','一般','推荐','力荐']
    window.onload=function(){
    var oDiv=document.getElementById('mark');
    var aLi=oDiv.getElementsByTagName('li');
    var oP=oDiv.getElementsByTagName('p')[0];
    var ospan=oDiv.getElementsByTagName('span');
    var i=0;

    for(i=0; i<aLi.length;i++){
    aLi[i].index=i;
    /*鼠标移入事件*/
       aLi[i].onmouseover=function(){
    oP.style.display ='block';
    ospan[0].style.display ='block';
    ospan[1].style.display ='block';
       oP.innerHTML=optxt[this.index];

    for(i=0;i<=this.index;i++)
    {aLi[i].className ='active';}
    }

    /*鼠标移出事件*/
        aLi[i].onmouseout=function(){
    oP.style.display ='none';
    ospan[0].style.display ='none';
    ospan[1].style.display ='none';
       for(i=0;i<aLi.length;i++)
    { aLi[i].className ='';}/*鼠标离开的时候将所有li的class置空*/
    }
    /*鼠标点击事件*/
       aLi[i].onclick= function(){
    alert('感谢您的评分!您给这部电影投了'+(this.index+1)+'分!');
    }
    }
    }
    </script>
    </head>
    <body>
    <div id="mark">
     <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
     </ul>
    <p></p>
     <span class="left"></span><span class="right"></span>
    </div>
    </body>
    </html>

    今天就到这儿吧,赶紧复习去,马上就要考试了。。。。

  • 相关阅读:
    QT中的定时器使用
    range()函数常和len()函数一起用于字符串索引。在这里我们要显示每一个元素及其索引值。
    range()的print 《P核》P30
    2.13 带逗号的print语句输出的元素之间自动带个空格
    Python3.x和Python2.x的区别
    print语句默认每行添加一个换行符 来自2.13
    2.12 while循环 print与计数器先后顺序对结果的影响
    函数本地绑定与全局绑定的区别
    字典映射{ :}
    《Python核心编程》P21输入数值字符串→转整型
  • 原文地址:https://www.cnblogs.com/dyllove98/p/3141225.html
Copyright © 2011-2022 走看看