JS实例之进度条制作,实现进度条读条效果

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>无标题文档</title>
 4 <style type="text/css">
 5 *{margin:0px auto; padding:0px;}
 6 #wai{width:200px; height:20px; margin-top:100px; border:1px solid #666;}
 7 #nei{width:0%; height:20px; background-color:#F00; float:left;}
 8 </style>
 9 </head>
10
11 <body>
12     <div id="wai">
13         <div id="nei"></div>
14     </div>
15     <input type="button" value="开始" onclick="zou()"/>
16 </body>
17 <script type="text/javascript">
18 var a=0;
19 function zou(){
20     if(a<100){
21         a++;
22     }
23     document.getElementById("nei").style.width =a+"%";
24     window.setTimeout("zou()",5);
25 }
26 </script>
27 </html>
时间: 2024-10-05 21:18:31

JS实例之进度条制作,实现进度条读条效果的相关文章

JS实例之列表选中,实现类似好友列表选中效果

1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 <style type="text/css"> 5 *{margin:0px auto; padding:0px;} 6 #wai{width:100px; height:110

CocoStudio使用笔记2:cocos2dx3.9使用CocoStudio制作的进度条LoadingBar

作为菜鸟曾一直使用手写cocos2dx界面,最近一直在研究cocostudio这个工具.尝试着使用工具来快速的开发游戏,折腾了一个多星期了,每天不停的搜索资料. 记录下本人试用cocostudio制作的启动界面所遇到的问题和经验,方便以后查阅. 首先设置编辑器的分辨率为480*800安卓分辨率的大小. 添加一个sprite精灵使用大小为480*800的图片(background.png)作为背景,然后添加sprite精灵作为游戏logo(logo.png),继续添加sprite作为进度条的背景(

Unity 3D 进度条制作

我们都知道玩游戏时,第一步要加载游戏,加载游戏时我们可以做一个简单的进度条来显示游戏加载进度,应为有了进度条,游戏画面不会过于呆板. 那么我们就开始游戏的进度条制作吧! 方法一: 1,使用NGUI制作,首先将NGUI插件导入到Unity 工程中. 导入后: 2,创建UI 3,在Panel下添加slider. 此处label是为了显示游戏进度. 5,脚本Procebar.cs,将此脚本添加到slider上. using UnityEngine; using System.Collections;

异步加载场景和Loading进度条制作

在切换场景的时候,直接 用 application.LoadLevel()这个方法,如果加载的场景资源过多的话,会卡死一段时间的. 所以,用一个过渡的场景的话,体验会好一点. 那么就先开始做一个过渡的场景(名字叫做:Loading)吧..(比如像下面酱紫,百度的一张图片) 要切换场景的时候,Application.LoadLevel("Loading"):就先切换到这个Loading场景,Loading场景资源少,就一个背景图和一个slider,所以,直接同步加载过来也很快的 然后,在

异步加载场景及Loading进度条制作

实现功能:点击开始游戏以后UI界面进入Loading界面,Loading结束以后自动进入游戏场景. 在这之前先在Build Settings中Add要使用的场景 在场景A中添加StartGame方法: Application.LoadLevel(1)://同步加载Loading界面(因为Loading界面资源较少速度快所以此处用同步方法) 在Loading场景中加入进度条图片:分为上下两层,上层负责显示进度 将上层的进度条Image组件中的Image Ttpe改为Filled 接下来再Loadi

下载进度的制作

这两天做了一个小项目,里面有个下载进度的进度条需要制作. 先看呈现的效果: 点击进度,然后依次递增,直到递增到百分之百. 现在把这部分代码分享下来. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery.js&quo

HTML中使用Vue+Dhtmlxgantt制作任务进度图

HTML中使用Vue+Dhtmlxgantt制作任务进度图 Dhtmlxgantt官网: https://dhtmlx.com/docs/products/dhtmlxGantt/ 参考文章 甘特图配置大佬翻译的官方文档 ,https://blog.csdn.net/qq_24472595/article/details/81630117:实现搜索 新增 编辑 删除 设置具体时间格式 突出周末显示https://blog.csdn.net/CX_silent/article/details/83

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

原文:CSS实现进度条和订单进度条 最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果图如下: CSS实现进度条: html结构: <div id="progress"> <span>70%</span> </div> css样式: #progress{ width: 50%; height

bootstrap-进度条--动态条纹进度条

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>进度条--动态条纹进度条</title>     <!-- 最新版本

097在进度条中显示进度百分比

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 #import "KMProgressViewWithLabel.h" 3 4 @interface ViewController : UIViewController 5 @property (strong, nonatomic) KMProgressViewWithLabel *progressViewCustom; 6 7 @end ViewController.m