<select id="progress" onchange="changeProgress(this)">
<option value="10%">10%</option>
<option value="20%">20%</option>
<option value="30%">30%</option>
<option value="40%">40%</option>
<option value="50%">50%</option>
<option value="60%">60%</option>
<option value="70%">70%</option>
<option value="80%">80%</option>
<option value="90%">90%</option>
<option value="100%">100%</option>
</select>
<div style="border:1px solid gray; width:200px; height:6px; border-radius:6px;">
<div id="pro" style="height:100%; background-color:red; border-radius:6px;" ></div>
</div>
<script type="text/javascript">
window.onload=function(){
var p=document.getElementById("progress");
var oPro=document.getElementById("pro");
oPro.style.width=p.value;
}
function changeProgress(obj){
var oPro=document.getElementById("pro");
oPro.style.width=obj.value;
console.log(obj.value);
}
</script> 公司让做东西的时候,顺手将这个css进度条写了一遍。记录一下

css 实现进度条的更多相关文章

  1. CSS实现进度条和订单进度条

    最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...

  2. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  3. Css静态进度条

    图片预览: Css代码: <style> .statusList{width:240px; float:left; line-height:68px;margin:0 2px; text- ...

  4. CSS 静态进度条效果

    今天学习到了实现一个静态进度条的方法,固写一篇笔记稳固一下自己的知识. 最终的效果如下,进度条放在一个框里,水平宽自适应. 现在就开始,首先写一个进度条先. .progress-bar{ /* 进度条 ...

  5. 纯CSS打造进度条

    进度条效果如下: CSS部分 body { background-color: white; } .progress-bar { display: flex; flex-direction: row; ...

  6. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  7. css绘制进度条,持续转动的进度条

    //只有 progress pregress-par bar,进度条不会转, //增加 active 这个类,进度条会转, //html结构 <div class='progress activ ...

  8. CSS+DIV进度条

    <style type="text/css"> .Bar { position: relative; width: 200px; /* 宽度 */ border: 1p ...

  9. CSS实现进度条

    进度条经常运用于网页,即使我们意识到不是所有的东西都将瞬间被加载完成,这些进度条用于提醒使用者关于网页上具体的任务进程,譬如上传,下载,加载应用程序等. 以前如果想要创建一个进度条的动画效果,没有使用 ...

随机推荐

  1. Java 中关键字transient引出序列化与反序列化

    一:transient(临时的)关键字 1.transient关键字只能修饰变量,而不能修饰方法和类.注意,本地变量是不能被transient关键字修饰的. 2.被transient关键字修饰的变量不 ...

  2. log在线生成器 html中如何设置浏览器中标题前的logo

    制作logo的地址:http://www.logomaker.com.cn/ 设置网站logo的方法 在<head></head>标签之间输入<link rel=&quo ...

  3. 函数:Python的乐高积木 - 零基础入门学习Python017

    函数:Python的乐高积木 让编程改变世界 Change the world by program 相信大家小时候应该都玩过神奇的乐高积木,只要通过想象和创意,我们可以用它拼凑出很多神奇的东西. 随 ...

  4. replace 全局替换 和 数组去空

    <script> /*var str = 'a,b,dhhhh,d'; str = str.replace(/h/g,'j'); alert(str);*/ </script> ...

  5. BZOJ 1001 狼抓兔子

    链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1001 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子 ...

  6. Powershell 快捷键

    Powershell的快捷键和cmd,linux中的shell,都比较像. ALT+F7 清除命令的历史记录PgUp PgDn 显示当前会话的第一个命令和最后一个命令Enter 执行当前命令End 将 ...

  7. android map高德地图显示多个点,并且每个marker点可以响应鼠标点击事件,处理跳转页面

    定义一个数组,然后将要显示的markers放进数组里面,让后循环每个marke对象,赋予监听事件,在监听事件里面写其它需要的功能: js举例: var arr = new Arry(); var ma ...

  8. ACM1174_爆头解题思路_空间三维坐标求点到直线的距离

    /* 爆头 Description gameboy是一个CS高手,他最喜欢的就是扮演警察, 手持M4爆土匪的头.也许这里有人没玩过CS,有必 要介绍一下“爆头”这个术语:所谓爆头,就是子 弹直接命中对 ...

  9. linux使用mysql的命令

    1.连接到mysql服务器的命令 mysql -h 服务器主机地址 -u 用户名 -p 用户密码 例:mysql -h 192.168.1.1 -u root -p   //指定服务器的主机地址和用户 ...

  10. linux之chdir函数解析

    [lingyun@localhost chdir]$ ls chdir.c [lingyun@localhost chdir]$ cat chdir.c  /********************* ...