css 特殊进度条
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta http-equiv= "X-UA-Compatible" content= "IE=edge" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>Document</title> <script src= "https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js" ></script> <style> body { background: rgba(44, 163, 255, 1); } .itembox { width: 400px; background: rgba(255, 255, 255, 0.1); border-radius: 16px 0px 16px 0px; border: 4px solid #E3F3FF; /* height: 40px; */ padding: 10px; overflow: hidden; display: flex; flex-wrap: nowrap; } .flex-shrink0 { -moz-flex-shrink: 0; -ms-flex-shrink: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .item { background: #7EC6FD; width: 20px; height: 40px; margin-right: 10px; transform: skewX(-40deg); position: relative; } .item-progress { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff; } .btn { border-radius: 10px; display: inline-block; padding: 10px; margin-top: 20px; color: #fff; cursor: pointer; border:1px solid #fff } .btn:hover { opacity: 0.8; } .test{ font-size: 26px; color: #fff; margin-bottom: 10px; } </style> </head> <body> <div id= "hello-vue" class = "demo" > <div class = "itembox" > <div v- for = "item in RangeCount" :key= "item" class = "item flex-shrink0" > <div class = "item-progress" v- if = "item <=currentCount" > </div> </div> </div> <div class = "test" > {{currentCount}} {{count}} /{{countTol}}</div> <div @click= "aaaa" class = "btn" >增加进度哦</div> </div> <script> const HelloVueApp = { data() { return { message: 'Hello Vue!!' , currentCount: 0, RangeCount:14, count: 0, countTol: 100 } }, methods: { aaaa() { if ( this .count>= this .countTol){ return false } this .count += 10; var p= this .count/ this .countTol; this .currentCount= Math.floor( this .RangeCount*p); console.log( 'aaa ' , p, this .RangeCount*p, this .currentCount); } } } Vue.createApp(HelloVueApp).mount( '#hello-vue' ) </script> </body> </html> |
效果:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库