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>
