查看: 245|回复: 0

[JavaScript] HTML5 progress(标签)进度条 摆脱传统嵌套方法

[复制链接]
蓝雨星辰 发表于 2018-2-28 23:59:21 | 显示全部楼层 |阅读模式
生活圈制作
<progress>标签是 HTML 5 中的新标签,标签定义运行中的进度(进程)可应用于上传进度、评分、投票等式样,可以使用 标签来显示 JavaScript 中耗费时间的函数的进度。可以对<progress>定义提示性语句,不作读出,通过控制其Value值。 如:<progress value="22" max="100" >亲,你的浏览器该升级咯!︶︹︺(浏览器不支持时将会显示此文本) </progress>
progress.jpg

  1. <!DOCTYPE html>
  2. <html>
  3.   
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  7.     <title>HTML5:rogress</title>
  8.     <script src="jquery.js"></script>
  9.     <style>/*progress*/ progress {width:100%;height:4em;border: 1px solid red;background-color:white;color:red;} progress::-moz-progress-bar{background:red; } progress::-webkit-progress-bar{background:white;} progress::-webkit-progress-value{background:red; } /*btn*/ button{width:100%;height:4em;background:black;color:white;font-size:1em;border:none;margin:2em 0;cursor:pointer;}</style>
  10.     <script>$(document).ready(function() {
  11.         $("button").click(function() {
  12.           var Val = $("progress");
  13.           Val.val(parseInt(Val.val()) + 1);
  14.         });
  15.       });</script>
  16.   </head>
  17.   
  18.   <body>
  19.     <progress value="22" max="100">亲,你的浏览器该升级咯!︶︹︺</progress>
  20.     <button>Click</button>
  21.     <aside>标签定义运行中的进度(进程)
  22.       <br/>可以使用 标签来显示 JavaScript 中耗费时间的函数的进度。
  23.       <br/>标签是 HTML 5 中的新标签。</aside></body>

  24. </html>
复制代码



最近访问 头像模式 列表模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表