我是使用JavaScript的新手,我的同事向我介绍了jQuery。现在,我正在测试如何在运行时使用声明的变量来创建进度条,并且我不知道如何创建一个<div>
及其相应的计数器以及CSS动画进度条
请检查变量counter2
,因为它被视为字符串而不是其内部值。
我希望这对所有人都有意义,感谢您检查此项目。
function clickme2(){
var values1 = [40,30];
for (counter2 = 0; counter2 <= 1; counter2++) {
var css =$(".progressbar[counter2]{height: 20px; background: #4169E1; width: 0; text-align: center; border: 1px;} ")
$("head").append(css)
var div =$("<br> <p id = progressnum>this is a progress bar [counter2]</p><div class = 'pp'><div class='progressbar[counter2]'> </div></div>");
$("body").append(div);
$('.progressbar').animate(
{
width: values1[counter2] + "%"
},
{
duration: 500
}
);
}
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style type='text/css'>
</style>
<body>
<br>
<button id="add" onclick="clickme2()">Add</button>
<br>
<script>
//refer to my javascript code
</script>
</body>
</html>
答案 0 :(得分:1)
要在字符串中使用变量,您必须将其连接起来,或使用模板文字。如果仅将其粘贴在字符串中,则会将其视为字符串,因为这是javascript的设计方式。
//concatenation
var x = 'me';
var aString = 'Please say hello to '+ x;
//template literal
var x = 'me';
var aString = `Please say hello to ${x}`;