当前位置: 首页 >> APP设计教程_APPUI设计教程_UI设计教程_网页设计师加油站 >> 阅读正文

原生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>
分享一下,与TA一见钟情~~

本文标题:原生javascript网站评论打分源代码分享

本文地址:http://www.25xt.com/allcode/1161.html

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。