简单的投票系统<纯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;
            width: 100px;
            float: left;
            text-align: center;
            background-color: skyblue;
        }

        .t {
            height: 25px;
            width: 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>
posted on 2017-06-02 11:28 张鑫4477 阅读(380) 评论(0) 收藏举报