bom-简单动画
2024-10-19 20:52:04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
#box {
position: relative;
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<input type="button" value="开始" id="btn">
<div id="box"></div>
<script>
// 1 点击按钮,让盒子能够向右移动
var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.onclick = function () {
// // style.left 获取的是标签中的style属性设置的样式属性的值
// // 如果标签中的style没有设置该样式属性,我们获取到的是空字符串
// console.log(box.style.left);
// // 10px10px 当我们给样式属性设置非法的值,浏览器会帮我们过滤掉
// console.log(box.style.left + 10 + 'px');
// box.style.left = box.style.left + 10 + 'px';
//
//
// 获取盒子当前的位置 offsetLeft offsetTop
// box.style.left = box.offsetLeft + 10 + 'px';
//
// box.offsetLeft 只读属性
//
// 2 让盒子不停的向右移动
// 循环的速度非常非常非常快,瞬间循环100次
// for (var i = 0; i < 100; i++) {
// box.style.left = box.offsetLeft + 5 + 'px';
// } var timerId = setInterval(function () {
// 让盒子停在500px的位置
// 判断盒子当前的位置是否到达500
//
// 最终盒子停止的位置
var target = 600;
// 步进
var step = 6;
if (box.offsetLeft >= target) {
// 停止定时器
clearInterval(timerId);
// 设置横坐标为500
box.style.left = target + 'px';
console.log(box.style.left);
// 退出函数
return;
}
box.style.left = box.offsetLeft + step + 'px';
console.log(box.style.left);
}, 30);
} </script>
</body>
</html>
最新文章
- SQL排序问题
- python 登陆接口
- js 获取中文的拼音
- FASTDFS .net 客户端
- java动态代理复习
- xml技术基础
- php基础知识(很简单一套适合零基础的朋友学习)
- HDU 4704 Sum (费马定理+快速幂)
- elasticsearch 配置说明
- PHP常用函数大全500+
- 15.selenium_case02
- 集合总结三(HashMap的实现原理)
- SkylineGlobe 如何使用二次开发接口创建粒子效果
- sitecore系统教程之禁用xDB和Xdb跟踪
- 自写Jquery插件 Menu
- 用sql plus时,显示协议适配器错误
- MVC源码分析 - Authorize授权过滤器
- ARM+LINUX嵌入式系统的终端显示中文乱码解决
- java程序设计课程实验报告3
- Java中HashMap 初始化时容量(参数)如何设置合适?
热门文章
- BL8810|USB2.0高速闪存读卡器芯片|BL8810规格书
- 关于使用JupyterNotebook运行代码运行到一半会闪退的问题
- jquery控制元素的隐藏和显示的几种方法
- Java集合与数组的联系和区别
- idea 创建Maven项目,Enable auto Import报“本地服务器没有从权威服务器上收到响应”
- Pytest_fixture(9)
- JMeter_jmeter-plugins插件的安装使用
- 您应该知道的35个绝对重要的Linux命令
- k8s中初始化容器(init container)的作用及其使用方法
- 深度学习之BP算法