<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. CODEVS 3138 栈练习2

    3138 栈练习2  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description (此题与栈练习1相比改了2处:1加强了数据 2不保证栈空时 ...

  2. (原创) ubuntu 12.04 install nvidia by the deb

    先安装 驱动 1. sudo dpkg -i  XXX.deb 2. sudo apt-get update 3. sudo apt-get install cuda 4. gedit ~/.bash ...

  3. javascript 笔试题之删除数组重复元素

    笔试时紧张没写出来,静下心后发现简单的要死. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" & ...

  4. css之自动换行-设计师零张

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

  5. 安装 adobe flash player

    安装方法:     1. 下载Adobe Flash Player:        http://fpdownload.macromedia.com/get/flashplayer/pdc/11.2. ...

  6. OpenWRT 编译 error GNU libiconv not in use but included iconv.h is from...

    OpenWRT 编译 error GNU libiconv not in use but included iconv.h is from... 编译的时候碰到一个常见的错误,但是却在一个陌生的地方爆 ...

  7. C++函数后面加const修饰

    声明一个成员函数的时候用const关键字是用来说明这个函数是 "只读(read-only)"函数,也就是说明这个函数不会修改任何数据成员(object). 为了声明一个const成 ...

  8. 【Cocos2d-X游戏实战开发】捕鱼达人之游戏场景的创建(六)

    本系列学习教程使用的是cocos2d-x-2.1.4(最新版为cocos2d-x-2.1.5)    博主发现前两个系列的学习教程被严重抄袭,在这里呼吁大家请尊重开发者的劳动成果, 转载的时候请务必注 ...

  9. hdu 5428 The Factor(数学)

    Problem Description There is a sequence of n positive integers. Fancycoder is addicted to learn thei ...

  10. python3-day1(文件操作)

    index: str.fomat() open file str.replace 一.新款str.fomat() 1.>>> '12'.zfill(5) '00012' 2.> ...