今天是2013年開始的第二個(gè)工作星期，這周我的前端開發(fā)任務(wù)比較多，學(xué)習(xí)了原生javascript之后，開始把公司網(wǎng)站所應(yīng)用到的交互特效 都想要用javascript來實(shí)現(xiàn)。下面這個(gè)是關(guān)于網(wǎng)站評論打分的js簡單交互特效。網(wǎ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>