原生javascript网站评论打分源代码分享

今天是2013年开始的第二个工作星期,这周我的前端开发任务比较多,学习了原生javascript之后,开始把公司网站所应用到的交互特效 都想要用javascript来实现。下面这个是关于网站评论打分的js简单交互特效。网站截图如下:网站打分系统javascript原生代码如下:因为该程序只要知道是那个id 就可以了。

<script type="text/javascript">

var oDiv=document.getElementById('dafen').getElementsByTagName('p');

var now;

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

var oTxt=oDiv[i].getElementsByTagName('input')[1];

var oSpan=oDiv[i].getElementsByTagName('i')[0];

oTxt.value='6分';

oSpan.style.width=parseInt(oTxt.value.replace(/[^0-9]/ig,""))*10+'%';

oDiv[i].index=i;

oDiv[i].onmouseover=function(){

now=this.index;

var oBtn1=oDiv[now].getElementsByTagName('input')[0];

var oBtn2=oDiv[now].getElementsByTagName('input')[2];

var oTxt1=oDiv[now].getElementsByTagName('input')[1];

var oSpan1=oDiv[now].getElementsByTagName('i')[0];

var num=parseInt(oTxt1.value.replace(/[^0-9]/ig,""));

oBtn1.onclick=function(){

if(num>1){

num=num-1;

oTxt1.value=num+'分';

oSpan1.style.width=num*10+'%';

}

}

oBtn2.onclick=function(){

if(num<10){

num=num+1;

oTxt1.value=num+'分';

oSpan1.style.width=num*10+'%';

}

}

}

}

</script>

每天更新,
全站高品质素材免费下载!