案例1：点击按钮摇起来

思路：

1. 2张图片，放进div里面，摇起来的本质是，此div按上下左右的位置和在一定的时间内发生移动

2. 所以用随机数的概念来实现位置的移动，用setInterval来实现一定的时间区间，前者封装在后者的处理 函数里面。最后全部作为点击按钮的点击事件的处理函数

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    img {

      width: 200px;

      height: 200px;

    }

    div {

      position: absolute;

    }

  </style>

</head>

<body>

  <input type="button" value="点击摇起来" id="btn1" />

  <input type="button" value="停止" id="btn2" />

  <div id="dv">

    <img src="data:images/tianshi.gif" alt="" />

    <img src="data:images/bird.png" alt="" />

  </div>

  <script src="common.js"></script>

  <script>

    //div摇动起来，本质是样式里面的上下，左右，移动一个随机值 Math.ramdom

    //并且在一个设定的时间区间内移动 setInterval

    //点击按钮摇起来

    my$("btn1").onclick = function () {

      timeId = setInterval(function () {

        //随机数

        var x = parseInt(Math.random() * 100 + 1);

        var y = parseInt(Math.random() * 100 + 1)

        //设置元素的left和top属性

        my$("dv").style.left = x + "px";

        my$("dv").style.top = y + "px";

      }, 100);

    };

    my$("btn2").onclick = function () {

      clearInterval(timeId);

    };

  </script>

</body>

</html>

效果：

案例2：星星闪动

思路：

和上个案例基本是同一个原理。这里都一个对象.innerHTML在div里面创建了个span, span里面放了个星星，然后让星星在范围更大的随机数值里面移动，时间设置短一些。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    div {

      width: 600px;

      height: 600px;

      border: 2px solid yellow;

      background-color: black;

      position: relative;

    }

    span {

      font-size: 30px;

      color: yellow;

      position: absolute;

    }

  </style>

</head>

<body>

  <input type="button" value="亮起来" id="btn" />

  <div id="dv"></div>

  <script src="common.js"></script>

  <script>

    my$("btn").onclick = function () {

      setInterval(function () {

        my$("dv").innerHTML = "<span>★</span>";

        var x = parseInt(Math.random() * 600 + 1);

        var y = parseInt(Math.random() * 600 + 1);

        my$("dv").firstElementChild.style.left = x + "px";

        my$("dv").firstElementChild.style.top = y + "px";

      }, 100);

    };

  </script>

</body>

</html>

效果：

JS---案例：点击按钮摇起来 & 星星闪动 （挺难看的）的更多相关文章

  1. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  2. js实现点击按钮传值

    js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  3. 使用js实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

  4. 原生 js 实现点击按钮复制文本

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...

  5. JS实现点击按钮，下载文件

    PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦.excel啦都是一样) 有两 ...

  6. 原生JS 实现点击按钮创建元素

    要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外 思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...

  7. js实现点击按钮弹出上传文件的窗口

    转自:https://www.jb51.net/article/100916.htm 1.详细描述 在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 ...

  8. js实现点击按钮实现上一张下一张相册滚动效果

    /****判断图片是否构成滚动效果*/$(function(){    if($("#bar").find('img').size()*71<=$("#bar&qu ...

  9. 利用JS实现点击按钮后图片自动切换

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)< ...

随机推荐

  1. C#变量---xdd

    cshape(c#)学习笔记 1. string str1=Console.ReadLine();//键盘输入的默认为字符串 2.  Console.WriteLine('你的成绩是'+a+'分'); ...

  2. scrapy自动抓取蛋壳公寓最新房源信息并存入sql数据库

    利用scrapy抓取蛋壳公寓上的房源信息,以北京市为例,目标url:https://www.dankegongyu.com/room/bj 思路分析 每次更新最新消息,都是在第一页上显示,因此考虑隔一 ...

  3. python-面向对象之封装

    封装 面向对象三大特性: 继承 封装 多态 隐藏对象的属性和实现细节,仅对外提供公共访问方法 广义上的封装 : 把方法和变量都封装在类中 狭义上的封装 : 在类的外部干脆不能调用了 优点 将变化隔离 ...

  4. [ASP.NET Core 3框架揭秘] 配置[2]：读取配置数据[下篇]

    [接上篇]提到“配置”二字,我想绝大部分.NET开发人员脑海中会立即浮现出两个特殊文件的身影,那就是我们再熟悉不过的app.config和web.config,多年以来我们已经习惯了将结构化的配置定义 ...

  5. 【Android - 进阶】之Animator属性动画

    1.概述 在3.0系统之前,Android给我们提供了逐帧动画Frame Animation和补间动画Tween Animation两种动画: 逐帧动画的原理很简单,就是将一个完整的动画拆分成一张张单 ...

  6. C语言博客作业11

    一.本周教学内容&目标 第5章 函数 要求学生掌握各种类型函数的定义.调用和申明,熟悉变量的作用域.生存周期和存储类型. 二.本周作业头 这个作业属于那个课程 C语言程序设计II 这个作业要求 ...

  7. SpringBoot使用拦截器、过滤器、监听器

    目录 ## 过滤器 PS: 原文链接https://www.cnblogs.com/haixiang/p/12000685.html,转载请注明出处 过滤器简介 过滤器的使用 拦截器 拦截器介绍 使用 ...

  8. 微信小程序——动态修改页面数据(和样式)及参数传递

    1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造 ...

  9. Java语法进阶13-文件、IO流

    File File是文件和目录路径名的抽象表示形式,即File类是文件或目录的路径,而不是文件本身,因此File类不能直接访问文件内容本身,如果需要访问文件内容本身,则需要使用输入/输出流. File ...

  10. js-Date()对象,get/setFullYear(),getDay()编程练习

    啥也不说!看代码 主要注意:getday()方法中原理!!! <!DOCTYPE html> <html lang="en"> <head> & ...