徒手写进度条

最新推荐文章于 2023-12-14 20:45:00 发布
最新推荐文章于 2023-12-14 20:45:00 发布
阅读量275 收藏
点赞数
分类专栏： 前端 HTML5第一季
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013943009/article/details/83339868
版权

  欢迎各种吐槽。

今天遇到一个要表示问卷调查填写进度的需要,这里做一个笔记供大家参考:

如下图:

1.进度条的数值根据做题的比例显示,后台传入;

2.进度条代码:

  2.1 div2是进度条的表框,div3是进度条显示长度

<style>
.div2{
width:75%;
height: 20px;
float: left;
border: 1px solid; #ccc;
}
.div3{
width:0%;
height: 20px;
line-height: 20px;
text-align: center;
background-color: rgb(102,205,153);
}
.span1{
width: auto;
line-height: 20px;
}
</style>
<body>
	<div name="prevDialysisInfo" style="width:100px;clear:both;cursor:pointer;white-space: nowrap;margin-top: 14px;" > 
                                                  				
				<div class="div2">
					<div class="div3" style="width:20%"></div>
				</div>
				<span class="span1">20%</span>
	</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style type="text/css">
        .Bar { position: relative; width: 200px;
            /* 宽度 */ border: 1px solid #B1D632; padding: 1px; }
        .Bar div{ display: block; position: relative;
            background:peachpuff;/* 进度条背景颜色 */ color: #333333;
            height: 20px; /* 高度 */ line-height: 20px;
            /* 必须和高度一致，文本才能垂直居中 */ }
        .Bar div span{ position: absolute; width: 200px;
            /* 宽度 */ text-align: center; font-weight: bold; }

    </style>
</head>
<body>
        百分比进度条样式:
    <div class="Bar">
        <div style="width:70%;">
            <span>70%</span>
        </div>
    </div>
</body>
</html>

 

因为热爱本身，就是奖励
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS手写进度条
weixin_42943920的博客
12-22 514
适用JS完成进度条的拖动效果 <!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
手写视频进度条
weixin_53248676的博客
06-22 763
手写视频进度条，复制了可以直接用的轮子。
手写进度条，鼠标移入显示悬浮框
CSSAJBQ_的博客
12-14 183
手写进度条，鼠标移入显示悬浮框
原生js 手写进度条
weixin_42684136的博客
10-12 629
js手写滚动条 效果图 HTML <!--进度条--> <div class="bar"> <div class="progress"> <div id="oDiv" class="circle"></div> </div> ...
前端手写进度条进度
sunnyboysix的博客
12-18 1227
一 效果图 二 上代码 <div class="listProgress"> <div class="currentProgress" :style="{'width': `${(item.value / 1000) * 100}%`}"></div> </div> //${(item.value / 1000) * 100}% 这里要计算成百分比 .listProgress { width: 100%; height: 5
连载：徒手写一个DICOM阅图软件（002）
最新发布
01-21
在本系列教程“徒手写一个DICOM阅图软件”中，我们将深入探讨如何使用C++编程语言，不依赖任何第三方库，实现一个基础的DICOM图像查看器。DICOM（Digital Imaging and Communications in Medicine）是一种广泛应用于...
连载：徒手写一个DICOM阅图软件（001）
01-15
在本系列教程“徒手写一个DICOM阅图软件”中，我们将逐步构建一个功能完备的DICOM图像查看器。本文作为系列的第一部分，主要关注基础工作，即创建一个MFC（Microsoft Foundation Classes）对话框程序，并加载及显示...
徒手配置Struts2
03-24
### 徒手配置Struts2的关键知识点 #### 一、徒手配置Struts2环境时需注意的关键事项 在没有使用任何集成开发环境的情况下配置Struts2，可能会遇到各种问题，尤其是在配置过程中对于细节的把握至关重要。以下是配置...
徒手撸MLP的工程
09-05
**徒手撸MLP的工程**是一项目基于Visual Studio 2013和OpenCV 2.4.9实现的手写数字识别项目，主要利用多层感知器（Multilayer Perceptron, MLP）进行训练和预测。在这个工程中，开发者自定义了神经网络结构，包括层...
用numpy徒手写cnn算法，内含数据集以及教程.zip
02-10
卷积神经网络（CNN，Convolutional Neural Network）是一种在图像识别和计算机视觉领域广泛应用的深度学习模型。在这个项目中，我们将使用Python的科学计算库numpy来实现CNN的基本原理，以此帮助理解其工作机制，而...
一个美观的进度条
11-21
这是一个CKCBusyProgressCtrl类型的进度条，该进度条可设计背景颜色，前景颜色，边框颜色，移动速度，方框个数等，功能
vue.js手写进度环_Vue.js的灵活进度栏
cuk5239的博客
07-23 421
vue.js手写进度环 vue-simple-progress (vue-simple-progress) A simple, flexible progress bar for Vue.js Vue.js的简单灵活的进度条 vue-simple-progress is designed to be a lightweight Vue.js progress bar requiring min...
css纯手写横向进度条和圆形进度条
liurong1028的博客
12-04 1451
1. 在style.scss里面封装样式 // 进度条(横向或圆形) // *$type:1=&gt;'横向';2=&gt;'圆形',noColor=&gt;'初始颜色', yesColor=&gt;'过去的颜色'* @mixin progress($type:2, $height: 5, $noColor: #ffb386, $yesColor: #ccc, $width:70, $to...
前端实现百分比进度条
热门推荐
礼拜八的博客
01-25 1万+
随着html5的普及，各种css3动画及js特效在网页中也是层出不穷，PC端加载数据的速度还是比较快的，但是对于移动端设备而言则相对要慢不少，如果图片或者脚本没有加载完，用户在操作中就可能发生各种问题，因此我们需要对数据加载进行侦测，以更加人性化的方法将网页程序内容展现给用户，实现更佳的用户体验。 1.定时器实现进度条 优点:解决大部分加载进度问题 缺点:一旦有了缓存，定时器加载就变得鸡肋了 ...
css 圆形扩散特效 水波
笔记库
10-16 2093
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=...
手写loading进度条
weixin_41813243的博客
07-20 164
<html> <head> <title>进度条</title> <style type="text/css"> .processcontainer{ width:450px; border:1px solid #6C9C2C; height:25px; } #processbar{ background:#95CA0D; float:left; ...
js实现简单的进度条效果
xiamoziqian的博客
02-18 2930
下面用js实现一个简单的进度条从0%逐渐增加到100%的效果。 css部分 *{ margin:0; padding:0; } #box{ position:relative; margin:100px auto; width:300px; height:30px; border:2px solid #666; } #range{ position:absolute; /*wid...
java Gui徒手绘画
05-11
Java GUI（图形用户界面）可以使用Java Swing库进行开发，绘画可以使用Java Graphics2D类。下面是一个简单的Java GUI程序，该程序提供了一个绘画区和一些工具，可以选择画笔颜色和笔刷大小，还有橡皮擦工具。 ```java import java.awt.*; import java.awt.event.*; import javax.swing.*; public class DrawingApp extends JFrame { private JPanel canvas; private JComboBox<String> colorChooser; private JComboBox<Integer> sizeChooser; private JToggleButton eraseButton; private Color currentColor = Color.black; private int currentSize = 5; public static void main(String[] args) { DrawingApp app = new DrawingApp(); app.setVisible(true); } public DrawingApp() { setTitle("Drawing App"); setSize(800, 600); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // create canvas panel and add to frame canvas = new JPanel(); canvas.setBackground(Color.white); canvas.addMouseListener(new MouseAdapter() { public void mousePressed(MouseEvent e) { Graphics2D g = (Graphics2D) canvas.getGraphics(); g.setColor(currentColor); if (eraseButton.isSelected()) { g.setColor(canvas.getBackground()); } g.setStroke(new BasicStroke(currentSize, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND)); g.drawLine(e.getX(), e.getY(), e.getX(), e.getY()); } }); canvas.addMouseMotionListener(new MouseMotionAdapter() { public void mouseDragged(MouseEvent e) { Graphics2D g = (Graphics2D) canvas.getGraphics(); g.setColor(currentColor); if (eraseButton.isSelected()) { g.setColor(canvas.getBackground()); } g.setStroke(new BasicStroke(currentSize, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND)); g.drawLine(e.getX(), e.getY(), e.getX(), e.getY()); } }); add(canvas, BorderLayout.CENTER); // create tool panel and add to frame JPanel toolPanel = new JPanel(); add(toolPanel, BorderLayout.NORTH); colorChooser = new JComboBox<String>(new String[] {"Black", "Red", "Green", "Blue"}); colorChooser.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { String color = (String) colorChooser.getSelectedItem(); switch (color) { case "Black": currentColor = Color.black; break; case "Red": currentColor = Color.red; break; case "Green": currentColor = Color.green; break; case "Blue": currentColor = Color.blue; break; } } }); toolPanel.add(new JLabel("Color:")); toolPanel.add(colorChooser); sizeChooser = new JComboBox<Integer>(new Integer[] {1, 3, 5, 10}); sizeChooser.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { currentSize = (Integer) sizeChooser.getSelectedItem(); } }); toolPanel.add(new JLabel("Size:")); toolPanel.add(sizeChooser); eraseButton = new JToggleButton("Eraser"); toolPanel.add(eraseButton); } } ``` 该程序创建了一个JFrame窗口，并在其中添加了一个绘画区（JPanel）和一个工具区（JPanel）。绘画区使用MouseListener和MouseMotionListener监听鼠标事件，并使用Graphics2D类绘制图形。工具区提供了选择颜色、笔刷大小和橡皮擦工具的选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值