一個簡單的進度條顯示功能

時間 2019-11-25

標籤一個簡單進度顯示功能简体版

原文原文鏈接

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>進度條</title>
</head>

<style type="text/css"> #bar{ animation:move 2s; text-align:center; height:50px; line-height:50px; background:#6caf00;
} @keyframes move{ 0%{ width:0;
    } 100%{ width:100%;
    } } </style>

<script type="text/javascript">
function $(id){ return document.getElementById(id); } function ss(){ var a = $("a").value; var b = $("b").value; var c = $("c").value; var d = $("d").value; var s = ((d - c) / (b - a)).toFixed(4)*100 + "%"; $("bar").style.width = s; $("bar").innerHTML = s; } </script>    

<body>
    <progress id ="pro" value ="0" max = "100"></progress>
</body>
<script type="text/javascript"> window.onload = function(){ var pro = document.getElementById("pro"); setInterval(function(e){ if(pro.value != 100) pro.value++; else pro.value = 0; },10); } </script>

</html>

相關標籤/搜索