JavaScript笔记52_定时器的应用(2)

最新推荐文章于 2022-10-06 01:01:14 发布
最新推荐文章于 2022-10-06 01:01:14 发布
阅读量62 收藏
点赞数
分类专栏： 前端html笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qqq777_/article/details/114669268
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload=function(){
            var btn01=document.getElementById("btn01");
            var btn02=document.getElementById("btn02");
            var box1=document.getElementById("box1");
            var timer;//全局变量
            btn01.onclick=function(){
                //关闭上一个定时器
                clearInterval(timer);
                //开启定时器
                timer=setInterval(function(){
                    //box1.offsetLeft为数值，box1.style.left为字符串
                    box1.style.left=box1.offsetLeft+10+"px";
                    //当元素移动到400px时，使其停止执行动画
                    //判断box1.style.left是否大于400
                    if(box1.offsetLeft>400){
                         box1.style.left=400+"px";
                    }
                }, 30);
            }
            btn02.onclick=function(){
                //关闭上一个定时器
                clearInterval(timer);
                //开启定时器
                timer=setInterval(function(){
                    box1.style.left=box1.offsetLeft-10+"px";
                    //当元素移动到0px时，使其停止执行动画
                    //判断box1.style.left是否大于400
                    if(box1.offsetLeft<0){
                         box1.style.left=0+"px";
                    }
                }, 30);
            }
        };
    </script>
</head>
<body>
    <button id="btn01">点击按钮以后，box1向右移动</button>
    <button id="btn02">点击按钮以后，box1向左移动</button>
    <br><br><br>
    <div id="box1"></div>
    <div style="width: 0;height: 800px;border-left: 1px black solid;position: absolute;left: 400px;"></div>
</body>
</html>

加一个按钮向右的，与老师的代码不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload=function(){
            var btn01=document.getElementById("btn01");
            var btn02=document.getElementById("btn02");
            var box1=document.getElementById("box1");
            btn01.onclick=function(){
                move(box1,400,10);
            }
            btn02.onclick=function(){
                move(box1,400,-10);
            }
        };
        var timer;
        //创建一个可以执行简单动画的函数
        //参数：obj 要执行动画的对象
        //speed速度
        //target
        function move(obj,target,speed){
            //关闭上一个定时器
            clearInterval(timer);
            //开启定时器
            timer=setInterval(function(){
                //box1.offsetLeft为数值，box1.style.left为字符串
                obj.style.left=obj.offsetLeft+speed+"px";
                //当元素移动到400px时，使其停止执行动画
                //判断box1.style.left是否大于400
                if(obj.offsetLeft>target){
                    obj.style.left=target+"px";
                }else if(obj.offsetLeft<0){
                    obj.style.left=0+"px";
                }
            }, 10);
        }
    </script>
</head>
<body>
    <button id="btn01">点击按钮以后，box1向右移动</button>
    <button id="btn02">点击按钮以后，box1向左移动</button>
    <br><br><br>
    <div id="box1"></div>
    <div style="width: 0;height: 800px;border-left: 1px black solid;position: absolute;left: 400px;"></div>
</body>
</html>
qqq777_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页之定时器详解
在人间
02-24 2474
        在网页的特效制作中，经常要用到定时器，比如：间隔一定时间后页面自动跳转，或者间隔一定时间出现某种效果等等。         若要页面定时跳转，简单的可以在head头部的meta标记中设定重定向就可以了。但我要说的是javascript中的定时器，它的功能是十分强大和有用的。         在javascript中有两个关于定时器的函数，它们是：   1.倒计定时器：timenam
Web APIS——DOM-获取DOM元素、修改属性
m0_52177571的博客
03-24 1957
目录 一、Web API 基本认知 1. 作用和分类 2. 什么是DOM 3. DOM树 4. DOM对象（重要） 二、获取DOM对象 1. 根据CSS选择器来获取DOM元素 (重点) 1.1 选择匹配的第一个元素 1.2 选择匹配的多个元素 2. 其他获取DOM元素方法（了解） 三、设置/修改DOM元素内容 1. document.write() 2. 元素innerText 属性 3. 元素.innerHTML 属性 四、设置/修改DOM元素属性 1. 设置/修改元素常用
Vue学习笔记02（走马灯小案例）
snacy的博客
10-19 236
1、this 一个vue实例中，如果要调用当前实例中的data里面的数据或者变量，要用this进行指向，this即代表当前实例 2、走马灯小案例 2.1 定义两个按钮以及一个p标签显示文字 <div id="app"> <input type="button" value="浪起来" @click="lang" /> <input type="button" value="低调" @click="stop" /> <p style="border:
python编程24种模式_Python编程(二十四)：JavaScript进阶，DOM操作
weixin_39902870的博客
12-16 218
在HTML中就是一大堆的标签，分块级和行内标签。一、CSS补充：页面布局CSS常用属性有：positionbackgroundtext-alignmarginpaddinfont-sizez-indexover-flow:hoveropacityfloat(clear:both)line-heightbordercolordisplay主站布局：在主站中页面主要分三块：页面头部，页面主体，页面末尾...
JavaScript笔记53_定时器的应用(3)
qqq777_的博客
03-12 42
两个盒子运动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
JavaScript笔记51_定时器的应用(1)
qqq777_的博客
03-11 48
点击按钮之前： 点击按钮之后：运动到400处，停下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=
JavaScript笔记48_定时器简介
qqq777_的博客
03-10 63
<!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> </style&gt
JavaScript学习笔记：定时器的应用2
最新发布
薛定谔的猫
10-06 134
就是将上次写的代码，向右移动。因为代码都是相似的，所以使用函数的方式更加简便。
JavaScript学习笔记：定时器的应用1
薛定谔的猫
10-06 79
【代码】JavaScript学习笔记：定时器的应用1。
JavaScript学习笔记之定时器
10-24
JavaScript中的定时器是编程中非常重要的一个概念，它允许开发者在特定时间点或者按照固定间隔执行某些代码。本文主要介绍了两种基本的定时器：`setTimeout` 和 `setInterval`。 ### setTimeout `setTimeout` 函数...
JavaScript学习笔记整理_setTimeout的应用
10-21
在本篇学习笔记中，我们将深入探讨`setTimeout`的应用及其相关概念。 首先，`setTimeout(f, n)`接收两个参数：一个函数`f`和一个时间间隔`n`（以毫秒为单位）。它会安排在`n`毫秒后执行`f`函数，但请注意，`...
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
12-01
本文实例讲述了JavaScript学习笔记之基于定时器实现图片无缝滚动功能。分享给大家供大家参考，具体如下： 一、无缝滚动理论基础 基础知识 1.setInterval（function，time）、clearInterval（timer） setInterval() ...
JavaScript点击div改变div的颜色
qqq777_的博客
10-21 2215
<!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> div{ w
JavaScript笔记34_创建新节点并插入到某节点前面
qqq777_的博客
03-02 1826
将“广州”节点插入到bj前面 myClick("btn02",function(){ //创建广州节点 var li=document.creatElement("li"); var gzText=document.creatTextNode("广州"); li.appendChild(gzText); //获取id为bj的节点 var bj=document.getElementById("bj"); //获取city var city=document.getElementById("city"); /
JavaScript笔记22_queryselector获取元素
qqq777_的博客
12-14 384
JavaScript笔记23_获取body和html方法
qqq777_的博客
12-15 287
JavaScript笔记35_将新员工信息添加入表格中
qqq777_的博客
03-03 278
第一种方法： 添加子节点、子元素 第二种方法：使用innerHTML，修改tr的innerHTML信息。
JavaScript笔记15_创建对象的方式
qqq777_的博客
11-29 225
<script> { var obj= { uname:'张三', age:13, sex:'male', sayhi:function() { console.log('hi'); }
JavaScript学习笔记：从基础到进阶
"JavaScript-学习笔记涵盖了JavaScript的基础和进阶知识，包括语言构成、语法要点以及实际应用中的关键概念。从JavaScript的起源和组成开始，介绍了JS书写的位置，强调了在HTML中嵌入脚本的重要性。接下来，详细讲解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值