简单的投票系统<纯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>

相关阅读:
springboot 和 spring clould 的版本匹配问题
 行到水穷处,坐看云起时!
转: 从单体应用 -> SOA--> 微服务 ,服务治理 [熔断,限流,降级,服务恢复,服务容错,监控等等]---> RPC ---> 下一代技术[Service Mesh]
spring-boot自定义线程池
 千与千寻的内容抓手
 哲学三问
 简约的人生
 关于中间件整理
 此心光明,亦复何言!
能容的下你身边比你优秀的人---是一种修行
原文地址：https://www.cnblogs.com/zhangxin4477/p/6932476.html