<%@ Page Language="C#" AutoEventWireup="true" CodeFile="toupiao.aspx.cs" Inherits="toupiao" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .s { margin-left: 50px; height: 100px; 100px; float: left; text-align: center; background-color: skyblue; } .t { height: 25px; 300px; } .tt { float: left; height: 100%; background-color: red; } </style> </head> <body> <form id="form1" runat="server"> <div id="d1" class="s"> 小米<br /> <span> <asp:Label ID="L1" runat="server" Text="0"></asp:Label></span> </div> <div id="d2" class="s"> 华为<br /> <span> <asp:Label ID="L2" runat="server" Text="0"></asp:Label></span> </div> <div id="d3" class="s"> 魅族<br /> <span> <asp:Label ID="L3" runat="server" Text="0"></asp:Label></span> </div> <div id="d4" class="s"> 苹果<br /> <span> <asp:Label ID="L4" runat="server" Text="0"></asp:Label></span> </div> <div style="clear: both;"></div> <div> 小米 <div class="t" id="t1"> <div id="tt1" class="tt"></div> </div> <span> <asp:Label ID="LL1" runat="server" Text="0"></asp:Label>%</span> </div> <br /> <div> 华为 <div class="t" id="t2"> <div id="tt2" class="tt"></div> </div> <span style="float: left;"> <asp:Label ID="LL2" runat="server" Text="0"></asp:Label>%</span> </div> <br /> <div> 魅族 <div class="t" id="t3"> <div id="tt3" class="tt"></div> </div> <span style="float: left;"> <asp:Label ID="LL3" runat="server" Text="0"></asp:Label>%</span> </div> <br /> <div> 苹果 <div class="t" id="t4"> <div id="tt4" class="tt"></div> </div> <span style="float: left;"> <asp:Label ID="LL4" runat="server" Text="0"></asp:Label>%</span> </div> </form> </body> </html> <script type="text/ecmascript"> var a1 = document.getElementById("d1"); var b1 = document.getElementById("d2"); var c1 = document.getElementById("d3"); var d1 = document.getElementById("d4"); //点击事件 a1.onclick = function () { var a2 = document.getElementById("L1"); a2.innerText = parseInt(a2.innerText) + 1; } b1.onclick = function () { var b2 = document.getElementById("L2"); b2.innerText = parseInt(b2.innerText) + 1; } c1.onclick = function () { var c2 = document.getElementById("L3"); c2.innerText = parseInt(c2.innerText) + 1; } d1.onclick = function () { var d2 = document.getElementById("L4"); d2.innerText = parseInt(d2.innerText) + 1; } //定时器 varh = window.setInterval(function () { var count = 0; var a2 = document.getElementById("L1"); var b2 = document.getElementById("L2"); var c2 = document.getElementById("L3"); var d2 = document.getElementById("L4"); var xx = document.getElementById("Label1"); count = parseInt(a2.innerText) + parseInt(b2.innerText) + parseInt(c2.innerText) + parseInt(d2.innerText); var x1 = document.getElementById("LL1"); var x2 = document.getElementById("LL2"); var x3 = document.getElementById("LL3"); var x4 = document.getElementById("LL4"); var tt1 = document.getElementById("tt1"); var tt2 = document.getElementById("tt2"); var tt3 = document.getElementById("tt3"); var tt4 = document.getElementById("tt4"); x1.innerText = parseInt(a2.innerText) / count * 100; tt1.style.width = ((parseInt(a2.innerText) / count) * 100) + "%"; x2.innerText = parseInt(b2.innerText) / count * 100; tt2.style.width = ((parseInt(b2.innerText) / count) * 100) + "%"; x3.innerText = parseInt(c2.innerText) / count * 100; tt3.style.width = ((parseInt(c2.innerText) / count) * 100) + "%"; x4.innerText = parseInt(d2.innerText) / count * 100; tt4.style.width = ((parseInt(d2.innerText) / count) * 100) + "%"; }, 500); </script>