javascript+css实现进度条效果的示例

2021-02-25 12:48:37 181

本文将为大家详细介绍“javascript+css实现进度条效果的示例”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“javascript+css实现进度条效果的示例”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

Java是什么

Java是一门面向对象编程语言，可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序。

具体内容如下

主要是以样式实现进度条的效果，JavaScript控制显示的百分比

html模板

css:

.progress_area{
width:255px;
height:13px;
border:1pxsolid#ccc;
border-radius:15px;
margin-bottom:30px;
}
.progress-inp{
width:60px;
height:28px;
border:1pxsolid#ccc;
background:#62c7ef;
border-radius:8px;
color:white;
cursor:pointer;
outline:none;
}
.progress_bac{
display:block;
height:100%;
width:50%;
background:#83a4f1;
border-radius:10px;
}

实现的效果：

感觉这个进度条显示的特别生硬；之后通过box-shadow对它加了个阴影效果：

box-shadow有6个参数：

box-shadow:inset x-offset y-offset blur-radius spread-radius color 分别为：投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色

css:

.progress_bac{
display:block;
height:100%;
width:50%;
background:#83a4f1;
border-radius:10px;
-moz-box-shadow:0px0px7px0px#4486ca;
-webkit-box-shadow:0px0px7px0px#4486ca;
box-shadow:0px0px7px0px#4486ca;
}

效果：

阴影的颜色可以自定义，通过box-shadow可以实现高亮的效果，多多尝试；

在点击下方按钮的时候，进度条会显示对应的值，到指定的位置，但是通过之上的代码来看，当点击按钮的时候进度条是一下子就到了指定的位置，没有过度的效果；

通过javascript和css两种方式来实现：

css：

css来实现很简单，css中有个参数叫transition动画效果，通过改变改参数的宽度的动画效果，很简单的就实现出来

.progress_bac{
display:block;
height:100%;
width:50%;
background:#83a4f1;
border-radius:10px;
-moz-box-shadow:0px0px7px0px#4486ca;
-webkit-box-shadow:0px0px7px0px#4486ca;
box-shadow:0px0px7px0px#4486ca;
-moz-transition:width0.5s;
-webkit-transition:width0.5s;
transition:width0.5s;
}

javascript：

js实现的方式就有多种了可以写个循环可以写个定时器：以下代码就是用定时器写的；

functionprogress(value){
if(value){
varnum="";
varloader_progress=setInterval(function(){
num++;
document.getElementById("progress").style.width=num+"%";
if(num==value){
clearInterval(loader_progress);
}
},10);
}
};

如果你能读到这里，小编希望你对“javascript+css实现进度条效果的示例”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注恰卡编程网行业资讯频道！

javascript