原生javascript網(wǎng)站評論打分源代碼分享

今天是2013年開始的第二個(gè)工作星期,這周我的前端開發(fā)任務(wù)比較多,學(xué)習(xí)了原生javascript之后,開始把公司網(wǎng)站所應(yīng)用到的交互特效 都想要用javascript來實(shí)現(xiàn)。下面這個(gè)是關(guān)于網(wǎng)站評論打分的js簡單交互特效。網(wǎng)站截圖如下:網(wǎng)站打分系統(tǒng)javascript原生代碼如下:因?yàn)樵摮绦蛑灰朗悄莻€(gè)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>

每天更新,
全站高品質(zhì)素材免費(fèi)下載!