定时器按钮--＞笔记

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

相关阅读:
对于爬虫的学习
【100天精通Python】Day50：Python Web编程_Django框架从安装到使用
基于php的旅游小型网站
如何使用jest
Unity Shader: Blend混合
学生个人html静态网页制作基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板
Java面试题18-tomcat为什么要使用自定义的类加载器
【Python&GIS】矢量数据投影转换(坐标转换)
从特斯拉林某某事件看Transformer
Qt篇——QChartView获取鼠标停留位置的数值

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