javascript - 向进度条添加百分号-6ren

javascript - 向进度条添加百分号

转载作者：太空宇宙更新时间：2023-11-04 15:29:49

26

4

我正在制作一个非常简单的进度条，一切正常，除了一件事……百分号。我的代码在下面，我的问题是如何在不弄乱脚本的情况下向其添加百分号。 - JsFiddle

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" href="Assets/IMG/Roz.png" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apache Testing Server</title>
<style type="text/css">
    #ProgressWrap {
        height:30px;
        width:300px;
        border:1px solid #222;
        text-align:center;
        position:relative;  
    }

    #ProgressStat {
        height:30px;
        width:0%;
        background-color:#9CF;
        position:absolute;
        top:0px;
        left:0px;
    }

    #ProgressPer {
        width:100%;
        height:30px;
        line-height:30px;
        position:absolute;
        top:0px;
        left:0px;
        z-index:1000;
    }
</style>

<script type="text/javascript">
window.onload = function() {
    document.getElementById('ProgressPer').innerHTML = 0;

    var Change = setInterval(function() {
        var Per = document.getElementById('ProgressPer').innerHTML;
        ++Per
        if(Per == 101)
        {
            clearInterval(Change);
        }
        else
        {
            document.getElementById('ProgressPer').innerHTML = Per;
            var Bar = document.getElementById('ProgressStat');
            Bar.style.width = Per + '%';    
        }
    }, 50);
}
</script>
</head>

<body>
    <div id="ProgressWrap">
        <div id="ProgressPer"></div>
        <div id="ProgressStat"></div>
    </div>
</body>
</html>

最佳答案

你需要改变这两行:

var Per = document.getElementById('ProgressPer').innerHTML.replace('%','');

和

document.getElementById('ProgressPer').innerHTML = Per.toString() + '%';

See the fiddle .

您的代码没有任何问题，但它并没有真正遵循 javascript 样式指南。此外，不必在计算中采用 innerHTML 值。这是要考虑的另一个版本。

var pct = 0,
    change = setInterval(function () {
    ++pct;
    if (pct == 101) {
        clearInterval(change);
    } else {
        document.getElementById('ProgressPer').innerHTML = pct.toString() + '%';
        var bar = document.getElementById('ProgressStat');
        bar.style.width = pct + '%';
    }
}, 50);

关于javascript - 向进度条添加百分号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15452459/

26

4

0

文章推荐： c++ - 将二进制文件读入 unsigned char vector 缓冲区

文章推荐： javascript - 加载对话框预加载页面

文章推荐： javascript - ExpressionEngine cms 中的定位问题

python if语句百分号
python if语句百分号嗨，朋友们！在这个温暖的早晨，我想和大家分享一下关于Python编程中的一些趣事。今天的话题是Python中的if语句和百分号的应用。废话不多说，我们马上开启这段奇幻旅
NSString stringWithFormat 百分号
这个问题在这里已经有了答案: How to add percent sign to NSString (7 个回答) 6年前关闭。我搜索并找不到这个答案...... 如果我有这个，我怎样才能让它显示
string - Bash:用字符串操作(百分号)
在操作字符串时，百分号在 bash 中意味着什么？例如，${0%/*} 是什么意思？最佳答案如果您使用@fedorqui 的资源，您会看到它将从第一个位置参数的末尾删除 /* 的最短匹配。一个例子
macos - ZSH 中的 %~(百分号)是什么？
我正在尝试自定义 this oh-my-zsh 主题。我在其中找到了这段代码，它显然打印了目录名称(如果我错了，请纠正我)。 # Dir: current working directory pro
bash - 百分号 % 在 crontab 中不起作用
我有一个关于 curl 的 cron 问题: curl -w "%{time_total}\n" -o /dev/null -s http://myurl.com >> ~/log 效果很好，在日志文
shell - %(百分号)在 crontab 中有何特殊之处？
在crontab中，你能做这样的事情吗？ * * * * * echo $( date +%F) >> /path/date.txt 最佳答案您的 crontab 行的实际问题不是 $() 或反引号
java - Android-从字符串中删除 URL 百分号
我有一个如下所示的 URL: Liberty%21%20ft.%20Whiskey%20Pete%20-%20Thunderfist%20%28Original%20Mix%29.mp3 我试图从中提
html - 百分号 (%) 的 HTML 字符引用代码是什么？
我想使用与字符 % 关联的代码。例如当我们想写 é 然后我们编码 é ，那么 % 的代码是什么？最佳答案有很多可能性: % % % 您在以下网站上找到的包含所
html - 百分号 (%) 是否应始终进行 HTML 转义？
我知道百分比符号在传递时必须进行 URL 编码，但是当我在浏览器中显示它时，是否也有必要像这样转义它:%？最佳答案在 URL 中，百分号 (%) 有一个 special meaning ，所以它应
escaping - 如何在 Hive QL 中转义 %(百分号)？
我需要我的过滤器来检索包含值 CPU usage % 的行还有 % usage如下: 其中 m.CounterName 像 %CPU usage \%或 m.CounterName喜欢 \%usage
.htaccess - Mod_rewrite 不适用于以 %(百分号)开头的 url
有几个指向我管理的站点的链接，其中网站管理员错误地在域名和页面名称之间包含了一个空格: www.domain.com/ page.html 当用户点击时，这会给出 www.domain
php - mysql 和 php 函数未正确显示 % 百分号
我正在使用 codeigniter 构建 Web 应用程序。此应用程序有一个用于多播的自动配置网络接口(interface)，它根据卡信息生成无效的 IP 多播。在 app.txt conf 文件中
Android:WebView 无法显示 '%' 百分号
我尝试在 webview 中播放 html 和 js 代码。代码包含符号“%”并且 webview 返回错误 ERROR_BAD_URL。 test{ width: 100%; height: 10
java - Eclipse 自动完成(百分号，在 Juno 中)
在使用旧版本多年后，我几天前开始使用 Eclipse Juno。有一件事真正困扰着我:自动完成框中方法旁边的百分比是什么意思？最佳答案百分比表示 Eclipse Code Recommender
java - Eclipse 自动完成(百分号，在 Juno 中)
在使用旧版本多年后，我几天前开始使用 Eclipse Juno。有一件事真正困扰着我:自动完成框中方法旁边的百分比是什么意思？最佳答案百分比表示 Eclipse Code Recommender
php - 在 mySQL 中创建表，名称包括连字符、百分号、句号等
我想在 mySQL 中创建包含连字符、句点、% 符号和其他名称的表。该名称将位于名为 image_name 的变量中。我该怎么做？当然我可以用下划线替换所有，但这是次优的。默认排序规则错误吗？我的代
apache - %(百分号)在 Apache 的 httpd.conf 中有什么作用？
好的，我从 http://httpd.apache.org/docs/2.0/misc/rewriteguide.html 看到以下示例.是否%{和 }使 Apache 将这两个分隔符之间的字符串解释
c - 如何转义 C 的 printf 中的 %(百分号)符号
在 C 中使用 printf 时如何转义 % 符号？ printf("hello\%"); /* not like this */ 最佳答案您可以通过像这样张贴双“%”来转义它:%% 使用你的例子:
c - 如何转义 C 的 printf 中的 %(百分号)符号
在 C 中使用 printf 时如何转义 % 符号？ printf("hello\%"); /* not like this */ 最佳答案您可以通过像这样张贴双“%”来转义它:%% 使用你的例子:
iphone - 在带有 objective-c 的 SQL 查询中使用 %-sign(百分号)
所以，正是标题所说的。我想使用这样的查询: NSString *querySQL = [NSString stringWithFormat:@"SELECT COUNT (*) FROM Device

首页

博学

6Ren·AI

商城

javascript - 向进度条添加百分号