Question

我正在尝试使用javascript创建一个简单的投票/投票程序，我试图在xammp上运行它以查看是否需要在Web服务器上执行但没有成功。我是否需要包括除jquery之类的vote.js之外的任何脚本js文件？我不确定。

有人可以帮助谢谢。

html

<!DOCTYPE html>
<html>

<head>
<title>Vote</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="vote.js"></script>
</head>

<body>
<div class="content">
    <h3 class="title">Who's better ?</h3>
<ul>
    <li class="option" id="option_1">
        Messi

        <p class="score" id="score_1">0</p>

        <div class="progressbar">
        </div>
    </li>

    <li class="option" id="option_2">
        Ronaldo

        <p class="score" id="score_2">0</p>

        <div class="progressbar">
        </div>
    </li>
   </ul>
   </div>
</body>
</html>

CSS

.content {
background-color: #5C5C5C;
height: 500px;
width: 600px;
font-family: CorpidRegular,Arial,Helvetica,sans-serif;
color: #fff;
font-weight: normal;
font-size: 1.5rem;
}
.progressbar_1 {
width: 400px;
border-radius: 0px;
margin-left: 100px;
}
.progressbar_2 {
width: 400px;
border-radius: 0px;
margin-left: 100px;
}

h3{    
text-align: center;
padding: 40px;
margin: 0px;
font-weight: normal;
}
ul{
list-style-type: none;
display: inline;
padding: 0px;
}
.option:first-child {
background: blue;
}
.option {
background: black;
}
li{
margin: 0px;
padding: 0px;
text-align: center;
color: #fff;
cursor: pointer;
}
li:hover {
color: yellow;
}

js

var totalVotes = 0;

$('.option').click(function() {
var $this = $(this);

// store voting value in data-voting
if (!$this.data('voting'))
    $this.data('voting', 0);

var voting = parseInt($this.data('voting'), 10);
voting++;
totalVotes++;

$this.data('voting', voting);

updateProgressBars();
});

function updateProgressBars()
{
$('.option').each(function()
    {
    var $this = $(this);
    var voting = parseInt($(this).data('voting'), 10);
    var pct = Math.round((voting / totalVotes) * 100);

    if (isNaN(voting)) voting = 0;
    if (isNaN(pct)) pct = 0;

    $this.find('progressbar').progressbar({value: pct});
    $this.find('.score').html(voting + ' of ' + totalVotes + ' (' + pct + '%)');
    });
}

Answer 1

您只关闭html标记，不打开标记

javascript将无法运行

1 个答案: