<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
function setStorage() {
if(localStorage.counter) {
localStorage.counter = Number(localStorage.counter) + 1;
} else {
localStorage.counter = 1;
}
return localStorage.counter;
}
var counter = setStorage();
var oBox = document.getElementById('box');
oBox.innerHTML = "您是第" + counter + "次访问!";
</script>
<p align="center">video size:<progress id="progress" max="1" value=""></progress></p></body>
<div style="margin:0 auto;text-align:center;"><video id="video-active" class="video-active" controls="controls">
<source src="video/米卡-创造营2021学员-So Sick.mp4" type="video/mp4"></source>
</video></div>
<div align="center">当前播放时间:<span id="video-time">0</span>秒</div>
</body>
</html>
怎么让访问次数居中,数字变红,video size怎么写拖动才可以调整视频大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box" style="text-align: center;">您是第<span id="count" style="color:red"></span>次访问!</div>
<p align="center">video size: <input id="range" onchange="change()" type="range" min="100" max="500" step="10"></p></body>
<div style="margin:0 auto;text-align:center;"><video id="video-active" style="width:auto;height:auto" class="video-active" controls="controls">
<source src="video/米卡-创造营2021学员-So Sick.mp4" type="video/mp4" type="video/mp4"></source>
</video></div>
<div align="center">当前播放时间:<span id="video-time">0</span>秒</div>
<script type="text/javascript">
function setStorage() {
if(localStorage.counter) {
localStorage.counter = Number(localStorage.counter) + 1;
} else {
localStorage.counter = 1;
}
return localStorage.counter;
}
var counter = setStorage();
var oCount = document.getElementById('count');
oCount.innerHTML = counter;
oVideo=document.getElementById('video-active')
oRange=document.getElementById('range')
oVideo.style.width=oRange.value+'px'
function change(){
oVideo.style.width=oRange.value+'px'
}
oVideo.ontimeupdate=function(){
document.getElementById('video-time').innerHTML=Math.floor(this.currentTime);
};
</script>
</body>
</html>