zoukankan html css js c++ java
简单的投票系统<纯JS,无数据库>

<%@ 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>
查看全文
相关阅读:
树链剖分（模板）洛谷3384
ST表（模板）洛谷3865
IOI 2005 River （洛谷 3354）
IOI 2005 River （洛谷 3354）
poj1094 Sorting It All Out
poj1094 Sorting It All Out
spfa（模板）
HAOI 2006 受欢迎的牛（洛谷2341）
HAOI 2006 受欢迎的牛（洛谷2341）
洛谷1850(NOIp2016) 换教室——期望dp
原文地址：https://www.cnblogs.com/zhangxin4477/p/6932476.html