商品评价小星星打分js

最新推荐文章于 2022-01-28 16:59:58 发布

weixin_30337157

最新推荐文章于 2022-01-28 16:59:58 发布

阅读量192

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dnzhu/p/4157055.html

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>星星打分</title>
        
        <style type="text/css">
        .evalInfo{
            font-size: 13px;
            font-family: '宋体';
            margin: 3 5px;
        }
        </style>
        <script type="text/javascript">

/** 用星星的方式来打分， **/
function evalSorce(rootEle, oEvent, targetObjId,attitudeTitleId) {
 var imgs = rootEle.getElementsByTagName("img");
 //var e = oEvent || window.event;
 var eventTarget = window.event.srcElement||eventTag.target; 
 var clickedImgValue = eventTarget.value;
 
 for(var i=0; i<imgs.length; i++) {
     var tempImg = imgs[i];
     if(tempImg.value <= clickedImgValue){
         tempImg.src ='/JSTest/img/bright.gif';
     }else {
         tempImg.src ='/JSTest/img/dark.gif';
     }
 }
 var targetObj =  document.getElementById(targetObjId);
 targetObj.value = clickedImgValue;
 var attitudeTitle = document.getElementById(attitudeTitleId);
 attitudeTitle.innerHTML = eventTarget.title;
 
}
</script>
    </head>
    <body>
        <input name="attitude" id="attitudeId" value="0">
        <span onclick="evalSorce(this, event, 'attitudeId','attitudeTitle')">
            <img title="非常差" value='1' src='/JSTest/img/dark.gif' />
            <img title="较差"   value='2' src='/JSTest/img/dark.gif' />
            <img title="一般"   value='3' src='/JSTest/img/dark.gif' /> 
            <img title="较好" value='4' src='/JSTest/img/dark.gif' />
            <img title="非常好" value='5' src='/JSTest/img/dark.gif' />
            <span id="attitudeTitle" class='evalInfo'></span>
        </span>
    </body>
</html>