JavaScript 以及 css3进度条
Posted 不苦不累, 人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 以及 css3进度条相关的知识，希望对你有一定的参考价值。
javascript css3进度条
使用css3实现进度条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #id1{ /*background-color: red;*/ border: solid 1px red; height: 30px; width: 800px; } .ni{ height: 30px; width: 0px; background-color: green; animation: func 5s linear forwards; } @keyframes func{ 0% { width: 0px; } 100% { width: 500px; } } </style> </head> <body> <div id="id1"> <div class="ni"> </div> </div> </body> <script>
JavaScript 进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#id1{
background-color: red;
height: 30px;
width: auto;
}
</style>
</head>
<body>
<div id="id1">
</div>
</body>
<script>
<!--通过使用重复定时器,实现进度条-->
var div1 = document.getElementById(‘id1‘);
var width =0;
var time1 = setInterval(function () {
width+=10;
console.log(width);
div1.style.width = width +‘px‘;
if (width >= 1000){
clearInterval(time1)
}
},100);
</script>
</html>
使用JavaScript简单实现乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="id1">
</div>
</body>
<script>
for (var i=1;i<=9;i++){
for (var j=1;j<=i;j++){
// console.log(j+"*"+i+"="+j*i);
document.write(j+‘*‘+i+‘=‘+i*j+‘ ‘);
}
document.write(‘<br>‘)
}
</script>
</html>
以上是关于JavaScript 以及 css3进度条的主要内容，如果未能解决你的问题，请参考以下文章