定时器按钮--＞笔记

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="huyiwei">
		<meta name="generator" content="HBuilder X">
		<title>定时器按钮title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0px;
			}
		style>
	head>
	<body>
		<button type="button" id="btn">
			点击按钮之后div向右移动
		button>
		<div id="box">
			
		div>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			var box = document.getElementById("box");
			btn.onclick = function(){
				// box.style.left = 200+"px";//快速移动
				var timer =  setInterval(function(){
					//可以利用这个函数做动画操作
					
					// box.style.left = 200+"px";
					var oldValue = box.offsetLeft;
					// box.style.left = oldValue+"10px";
					var oldValue = getStyle(box,"left");
					//oldValue+10px
					// window.parseInt(oldValue)
					// console.log(window.parseInt(oldValue))
					var ov = window.parseInt(oldValue)
					//在旧值的基础上增加
					var newalue = ov+10;
					//给left进行赋值
					box.style.left = newalue+"px";
					
					//当元素移动到800px时，停止
					if(newalue==800){
						clearInterval(timer);
					}
				},1000);
			}
			//用来获取某一个元素的样式
			function getStyle(obj,name){
				// getComputedStyle();
				var cssobj = getComputedStyle(obj,null);
				// return cssobj.name;
				return cssobj[name];
			}
			 var left =  getStyle(box,"left");
			 console.log(left);//undefined
			 //undefined  是因为return cssobj.name;导致的
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

相关阅读:
Win7下安装Docker(虚拟机win7)
搜索与图论 ---- 匈牙利算法
【C++】多态 ⑪ ( 纯虚函数和抽象类 | 纯虚函数语法 | 抽象类和实现 | 代码示例 )
百数服务商——顶杰云，为建筑行业数字化转型“添砖加瓦”
SS-Model【5】：U-Net
JAVA面试八股文之JVM
【busybox记录】【shell指令】chown
uniApp组件如何使用笔记
实习生跑路留了一个大坑，搞出2个线上问题，我被坑惨了
用node开发微信群聊机器人第②章

原文地址：https://blog.csdn.net/weixin_55804957/article/details/127543816