JS简单的投票代码:带无刷新比例显示效果

JS简单的投票代码，带无刷新比例显示效果，闲着没事的时候写的，基本效果都实现了，就是不太漂亮。当我们使用鼠标分别点击投票按钮，可看到对应的数据在增加或减少，适时的，可以看作是一个挺简单的Ajax无刷新的应用，分享给朋友们参考。

示例：

<!DOCTYPE html><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /><br /> <title>简单的JS投票代码</title><br /> <style><br /> *{ margin:0; padding:0;}<br /> #div1{ background:#000; width:500px; height:30px; position:relative;}<br /> .a_1, .a_2{ position:absolute; top:0; height:30px;}<br /> .a_1{ left:0; background:#0F6;}<br /> .a_2{ right:0; background:#39C;}<br /> input{ margin-top:30px;}<br /> </style><br /> <script><br /> window.onload=function()<br /> {<br /> var oDiv=document.getElementById('div1');<br /> var aDiv=oDiv.getElementsByTagName('div');<br /> var aBtn=document.getElementsByTagName('input');<br /> var lNum=50;<br /> var rNum=25;<br /> var lNums=(rNum/(lNum+rNum))*500;<br /> var rNums=500-lNums;<br /> aDiv[1].style.width=parseInt(lNums)+'px';<br /> aDiv[0].style.width=500-parseInt(lNums)+'px';<br /> aDiv[0].innerHTML=(lNum/(lNum+rNum)).toFixed(2);<br /> aDiv[1].innerHTML=(1-lNum/(lNum+rNum)).toFixed(2);<br /> aBtn[0].onclick=function()<br /> {<br /> lNum=lNum+1;<br /> var lNumss=parseInt(lNum/(lNum+rNum)*500);<br /> aDiv[0].style.width=lNumss+'px';<br /> aDiv[1].style.width=(500-lNumss)+'px';<br /> aDiv[0].innerHTML=(lNum/(lNum+rNum)).toFixed(2);<br /> aDiv[1].innerHTML=(1-lNum/(lNum+rNum)).toFixed(2);<br /> }<br /> aBtn[1].onclick=function()<br /> {<br /> rNum=rNum+1;<br /> var rNumss=parseInt(rNum/(lNum+rNum)*500);<br /> aDiv[0].style.width=(500-rNumss)+'px';<br /> aDiv[1].style.width=rNumss+'px';<br /> aDiv[0].innerHTML=(lNum/(lNum+rNum)).toFixed(2);<br /> aDiv[1].innerHTML=(1-lNum/(lNum+rNum)).toFixed(2);<br /> }<br /> }<br /> </script><br /> </head><br /> <body><br /> <div id="div1"><br /> <div class="a_1"></div><br /> <div class="a_2"></div><br /> </div><br /> <input type="button" name="veryhuo-com" value="投票1" /><br /> <input type="button" name="veryhuo-com" value="投票2" /><br /> </body><br /> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

热点

JS简单的投票代码:带无刷新比例显示效果

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

JS简单的投票代码:带无刷新比例显示效果

由 dawei

相关文章

SQLite 实现if not exist 类似功能的操作

PostgreSQL将数据加载到buffer cache中操作方法

在PostgreSQL中使用ltree处理层次结构数据的方法

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀