前言

• 学习本文内容要用到的语言知识
  • 中文（看得懂本文）
  • html
  • css
  • javascript

正文

在很多游戏都需要有战斗系统，而战斗系统纯文字看起来似乎有些许单调，经过无数作者绞尽脑汁的苦想后，就诞生出了加进度条这一设想😉 就是上面这个东西，它奇丑无比，所以我们需要用css给它美化，而且它没有绑定你的血量等相关变量，这时还需要我们的JavaScript来实现

css美化

直接先上代码

<style>
    progress{
        width:50%;
        height:12px;
        border-radius:5px 5px 5px 5px;
    }
    progress#hp::-webkit-progress-bar{
        /*进度条背景样式*/
        background:white;
        border-radius:5px 5px 5px 5px;
    }
    progress#hp::-webkit-progress-value{
        /*进度条进度样式*/
        background:red;
        border-radius:5px 5px 5px 5px;
    }
</style>

这里用了两个伪类，一个是进度条进度的样式，一个是进度条背景的样式，“#hp”，hp是进度条的id名

利用JavaScript绑定变量到进度条

=:MD.hp=30;MD.hpmax=100;
//初始化血量，血量上限
=:setInterval(function(){document.getElementById("hp").value=MD.hp;document.getElementById("hp").max=MD.hpmax;document.getElementById("hptxt").innerHTML=MD.hp+"/"+MD.hpmax;},100);

这里利用document.getElementById('idname').value与document.getElementById('idname').max将变量绑定到进度条

完整例子

[|]
<progress value="0" max="100" id="hp"></progress><span id="hptxt"></span>
<style>
    progress{
        width:50%;
        height:12px;
        border-radius:5px 5px 5px 5px;
    }
    progress#hp::-webkit-progress-bar{
        /*进度条背景样式*/
        background:white;
        border-radius:5px 5px 5px 5px;
    }
    progress#hp::-webkit-progress-value{
        /*进度条进度样式*/
        background:red;
        border-radius:5px 5px 5px 5px;
    }
</style>
=:MD.hp=30;MD.hpmax=100;

=:setInterval(function(){
document.getElementById("hp").value=MD.hp;
document.getElementById("hp").max=MD.hpmax;
document.getElementById("hptxt").innerHTML=MD.hp+"/"+MD.hpmax;
},100);
等：99999 | &nbsp

最后附上演示

知识拓展(css样式做到兼容各种浏览器)

在上面的css代码中，你也许细心的发现了有“-webkit-”这个东西

这是什么呢，这是浏览器的内核识别码，webkit是谷歌浏览器的，下面我列出了css浏览器的识别码

都在上面了，如果你想让玩家更舒服的玩你的游戏，可以像那个webkit一样写几个其他浏览器的 css代码，把webkit改成moz,ms,o这些

讲完了🇨🇳