<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
<script>
var speedx = 3;
const move = () => {
var div = window.getComputedStyle(document.getElementsByTagName("div")[0]);
var tleft = parseInt(div.left);
var left = speedx + tleft;
var ttop = parseInt(div.top);
var top = speedx + ttop;
document.getElementsByTagName("div")[0].style.left = left + 'px';
document.getElementsByTagName("div")[0].style.top = top + 'px';
}
var mymove = setInterval(() => {
move();
}, 20);
setTimeout( () => { //2秒后停止
clearInterval(mymove);//停止
} , 2000);
</script>
</body>
</html>
document.defaultView.getComputedStyle(element[,pseudo-element]);
或者
window.getComputedStyle(element[,pseudo-element]);
首先是有两个参数,元素和伪类。第二个参数不是必须的,当不查询伪类元素的时候可以忽略或者传入 null。
使用示例
let my_div = document.getElementById("myDiv");
let style = window.getComputedStyle(my_div, null);
getComputedStyle 返回的对象是 CSSStyleDeclaration 类型的对象。取数据的时候可以直接按照属性的取法去取数据,例如 style.backgroundColor。需要注意的是,返回的对象的键名是 css 的驼峰式写法,background-color -> backgroundColor。
getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象,取相应属性值得时候都是采用的 CSS 驼峰式写法,均需要注意 float 属性。
而不同点就是:
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示: 1000 毫秒= 1 秒。
提示: 如果你只想执行一次可以使用 setTimeout() 方法。
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)
参数
描述
code/function
必需。要调用一个代码串,也可以是一个函数。
milliseconds
必须。周期性执行或调用 code/function 之间的时间间隔,以毫秒计。
param1, param2, …
可选。 传给执行函数的其他参数(IE9 及其更早版本不支持该参数)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小潘</title>
</head>
<style>
#myProgress {
width: 100%;
height: 30px;
position: relative;
background-color: #ddd;
}
#myBar {
background-color: #4CAF50;
width: 10px;
height: 30px;
position: absolute;
}
</style>
<body>
<h1>JavaScript 进度条</h1>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button onclick="move()">点我</button>
<script>
function move() {`在这里插入代码片`
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
</body>
</html>
手机扫一扫
移动阅读更方便
你可能感兴趣的文章