js动态状态栏

雨点打透心脏的1/2处 2022-08-07 11:51 100阅读 0赞

**一、**最近需要实现一个动态状态栏的小插件。自己写了个很简单的，虽然不是很强大，但是很简单。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>图片实现进度条</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    </head> 
    <body> 
    <div id="play_progress" style="position:relative;">
    <div id="play_progress_bg" style="position:absolute; width:360px; height:15px; z-index:2;background-image:url(progressbar_bg.png);background-repeat:no-repeat;"></div>
    <div id="play_progress_bar" style="position:absolute;  width:0px; height:11px; z-index:3;background-image:url(progressbar.png);background-repeat:no-repeat;"></div>
    </div>
    </body> 
     <script src="jquery-1.4.2.min.js"></script>
      <script type="text/javascript">
      $(document).ready(moveState(60));
      function moveState(score) {
      $("#play_progress_bar").animate({width:score*3}, 5000);
      }
      </script>
    </html>

只需要有两个图片就可以完成功能了。

二、又找了网上的相关代码，收获如下。

1、利用setInterval()函数和clearInterval()函数去动态画。

2、利用setTimeout()函数和clearTimeout()函数去调节图片显示宽度，而且会添加js特效，如文字效果等。

我将资源也上传上来了。在我的资源中可以下载。

发表评论取消回复

表情：

评论列表（有 0 条评论，100人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android动态显示和隐藏状态栏/实现沉浸式状态栏

一、更简单的沉浸式状态栏在 [http://www.jianshu.com/p/b4d5a307f793][http_www.jianshu.com_p_b4d5a3...

蔚落/ 2024年04月17日 22:31/ 0 赞/ 76 阅读

相关沉浸式状态栏

实现效果 ![默认为透明导航栏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

叁歲伎倆/ 2023年01月24日 02:28/ 0 赞/ 222 阅读

相关 js动态加载js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

约定不等于承诺〃/ 2022年08月27日 05:52/ 0 赞/ 253 阅读

相关透明状态栏（沉浸式状态栏）

透明状态栏（沉浸式状态栏）透明状态栏（Translucate StatusBar）是android从4.4开始模仿ios推出的一种模式，他可以改变状态栏的颜色，

迷南。/ 2022年08月20日 02:20/ 0 赞/ 274 阅读

相关 js动态状态栏

一、最近需要实现一个动态状态栏的小插件。自己写了个很简单的，虽然不是很强大，但是很简单。 <!DOCTYPE html PUBLIC "-//W3C//DTD XH

雨点打透心脏的1/2处/ 2022年08月07日 11:51/ 0 赞/ 100 阅读

相关隐藏状态栏

在开发过程中很多时候都要隐藏页面的状态栏： UIViewController中提供了一个prefersStatusBarHidden方法用于控制当前的控制器的状

短命女/ 2022年07月15日 15:22/ 0 赞/ 278 阅读

相关 js 动态时钟

> 引用块内容 > ![这里写图片描述][20161025204142316] ![这里写图片描述][20161025204321354] 这里写代码片<!DO

待我称王封你为后i/ 2022年07月15日 00:05/ 0 赞/ 228 阅读

相关沉浸式状态栏

TextView textView; ViewGroup view; @Override protected void

雨点打透心脏的1/2处/ 2022年06月15日 09:26/ 0 赞/ 289 阅读

相关状态栏添加图标

关于在状态栏添加类似wifi,蓝牙那样图标,这种需求一般是通过广播来实现的,点击应用UI里的开关发送广播,这个广播由 \\android\\frameworks

小鱼儿/ 2022年06月02日 10:23/ 0 赞/ 263 阅读

相关 iOS 更改状态栏颜色和隐藏状态栏

更改状态栏颜色 iOS7以后状态栏的字体为黑色：UIStatusBarStyleDefault 状态栏的字体为白色：UIStatusBarStyleLightC

刺骨的言语ヽ痛彻心扉/ 2022年04月11日 13:45/ 0 赞/ 470 阅读