首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
function
emoji
web3
go
integer
ip
process
scala
int
perl
hashset
js
copy
char
dagger
include
settings
actionscrip
controller
php7
nodejs
usb
keyword
default
main
testing
range
schema
object
loops
command
config
future
python3
jsp
import
timestamp
web
string
sum
frameworks
php8
python
bit
hook
hashtable
export
client
input
lua
rsa
python2
flutter
search
netty
hashcode
typescript
dockerfile
split
cookie
cpython
buffer
cmd
byte
chat
replace
fetch
erlang
cSharp
io
request
spring
format
php5
require
foreach
list
merge
substring
当前位置:
开发笔记
>
编程语言
> 正文
利用js来实现动态进度条效果
作者:谁是我在寻找 | 来源:互联网 | 2023-01-24 16:42
1.html结构:<divout><divclass
1.html结构:
<
div
class
=
"
out
"
>
<
div
class
=
"
inner
"
>
<
span
>0%
span
>
div
>
div
>
2. css样式:
<
style
>
.out
{
width
:
1200
px
;
height
:
20
px
;
border
:
2
px
solid
blue
;
border-radius
:
10
px
;
overflow
:
hidden
;
margin
:
400
px
auto
;
position
:
relative
;
}
.inner
{
height
:
20
px
;
width
:
0
;
background-color
:
yellowgreen
;
}
span
{
color
:
red
;
font-size
:
18
px
;
line-height
:
20
px
;
position
:
absolute
;
left
:
50
%
;
}
3. js代码:
<
script
src
=
"
./jquery.min.js
"
>
script
>
<
script
>
$
(
function
() {
$
(
'
.inner
'
).
animate
({
// 动画的终点是inner的宽度等于out的宽度
width
:
$
(
'
.out
'
).
width
(),
},
10000
,
function
() {
// alert('加载完毕');
})
//设置计时器,动态的改变span的文本显示
var
timerID
=
setInterval
(
function
() {
// 显示进度百分比
var
num
=
Math
.
floor
(
$
(
'
.inner
'
).
width
()
/
$
(
'
.out
'
).
width
()
*
100
);
$
(
'
span
'
).
html
(num
+
'
%
'
);
},
100
)
})
script
>
js
html
ip
jquery
function
int
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
js
Html5-Canvas实现简易的抽奖转盘效果
本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ...
[详细]
蜡笔小新 2023-12-13 06:02:20
js
Voicewo在线语音识别转换jQuery插件的特点和示例
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
testing
单击时动态创建
元素 - Dynamically create
element on click
Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ...
[详细]
蜡笔小新 2023-12-12 15:59:36
range
MooTools和JQuery并排 - MooTools and JQuery Side by Side
IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ...
[详细]
蜡笔小新 2023-12-12 13:43:58
js
lua语言闭包、模式匹配、日期、编译、模块的特性及应用
本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ...
[详细]
蜡笔小新 2023-12-14 18:18:21
controller
Java实战之电影在线观看系统的实现
本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ...
[详细]
蜡笔小新 2023-12-14 15:52:03
range
CSS3选择器的使用方法详解,提高Web开发效率和精准度
本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ...
[详细]
蜡笔小新 2023-12-14 14:37:52
object
如何使用Java获取服务器硬件信息和磁盘负载率
本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ...
[详细]
蜡笔小新 2023-12-14 13:56:20
nodejs
前端人员必须知道的三个问题及其发展阶段
本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ...
[详细]
蜡笔小新 2023-12-12 12:45:59
js
HTML5网页模板怎么加百度统计?
本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ...
[详细]
蜡笔小新 2023-12-11 12:06:41
js
Android实战——jsoup实现网络爬虫,糗事百科项目的起步
本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ...
[详细]
蜡笔小新 2023-12-11 09:19:45
main
JS进修笔记——闭包的运转机制和作用域
本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ...
[详细]
蜡笔小新 2023-12-14 18:45:00
js
Java日期格式化总结及示例代码
本文总结了Java中日期格式化的常用方法,并给出了示例代码。通过使用SimpleDateFormat类和jstl fmt标签库,可以实现日期的格式化和显示。在页面中添加相应的标签库引用后,可以使用不同的日期格式化样式来显示当前年份和月份。该文提供了详细的代码示例和说明。 ...
[详细]
蜡笔小新 2023-12-14 18:18:57
js
【机器学习】生成式对抗网络模型综述
生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ...
[详细]
蜡笔小新 2023-12-14 17:51:18
main
Java实现大数乘法(分治算法)
本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ...
[详细]
蜡笔小新 2023-12-14 15:43:50
谁是我在寻找
这个家伙很懒,什么也没留下!
Tags | 热门标签
function
emoji
web3
go
integer
ip
process
scala
int
perl
hashset
js
copy
char
dagger
include
settings
actionscrip
controller
php7
nodejs
usb
keyword
default
main
testing
range
schema
object
loops
RankList | 热门文章
1
DB2列转行SQL
2
带你玩转新一代无服务器产品:IBM Cloud Code Engine(一)
3
hdu1029思维题
4
Dynamics 365 CE命令栏按钮点击后刷新表单页面方法
5
多线程同步系列之二关键区
6
CCIE课程介绍
7
C语言实现扫雷小游戏(扩展版)
8
linux系统下如何github,Linux安装使用GitHub的步骤
9
notepad php代码自动补全,Spyder设置代码自动补全
10
P4240 毒瘤之神的考验
11
char函数sql mysql_oracle、sqlserver、mysql惯用函数对比[to_char、to_number、to_date]_mysql...
12
基于vue2.0+weex开辟app 当中碰到的题目(爬坑之旅)
13
如何评估自己对外界认识是否正确?
14
c语言这个咋整,c语言?怎么用
15
简易模型计算机设计仿真,体视学虚拟实验模型的计算机仿真设计与实现
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有