案例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. 2019牛客暑期多校训练营（第九场） E-All men are brothers（并查集+组合数学）

    >传送门< 题意:最初有 n个人且互不认识,接下来 m行,每行有 x,y表示x和y交朋友,朋友关系满足自反性和传递性,每次输出当前选取4个人且互不认识的方案数. 思路:比赛的时候知道是用并 ...

  2. Ubuntu 16.04 安装最新稳定版Nginx 1.6.0

    Ubuntu 16.04 默认安装的是nginx 1.14.0 #默认安装方式:apt-get  install nginx   1.查看是否安装nginx,如果已经安装,请先卸载 #查看安装版本 d ...

  3. 部署 kube-controller-manager 高可用集群

    目录 前言 创建kube-controller-manager证书和私钥 生成证书和私钥 将生成的证书和私钥分发到所有master节点 创建和分发kubeconfig文件 分发kubeconfig到所 ...

  4. python logging模块小记

    1.简单的将日志打印到屏幕 import logging logging.debug('This is debug message') logging.info('This is info messa ...

  5. MySQL-简介-安装（5.5版和5.7版）

    1.什么是MySQL (1)MySQL是一种关联数据库管理系统. (2)关联数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库中,可以增加速度,提高灵活性. (3)MySQL使用的是数据库常 ...

  6. 【Luogu P3174 】[HAOI2009]毛毛虫

    前言: 虽然很多人和我想法一样 ,但我还是不要脸地写了这题解 题目: 链接 大意: 在一棵树上取一条最长链以及它所连接的结点总共的结点个数 思路: 取链: 用树形\(DP\)就可以轻而易举的解决这个问 ...

  7. MySQL的5种时间类型的比较

    日期时间类型 占用空间 日期格式 最小值 最大值 零值表示 DATETIME 8 bytes YYYY-MM-DD HH:MM:SS 1000-01-01 00:00:00 9999-12-31 23 ...

  8. php 图片指定留白叠加缩放

    遇到这样一个需求:原图大小不一,而且留白也大小不一,需要将原图切出来一个核心图,然后将图片左右留白,组成一个其他尺寸的图片.换句话说,原图在新图片中的位置是可以控制的. 这里思路是:先创建一个规定大小 ...

  9. LeetCode 5282. 转化为全零矩阵的最少反转次数

    地址 https://leetcode-cn.com/submissions/detail/39277402/ 题目描述给你一个 m x n 的二进制矩阵 mat. 每一步,你可以选择一个单元格并将它 ...

  10. ImSQL：海量数据，可信存储

    数据造假.数据不可信等问题的存在,给金融监管及风控等众多应用场景带来了严峻的挑战,也正成为阻碍数据大规模互联互通.共享共用的一大障碍.数据的真实可信问题长期影响着社会的各个领域,在更依赖数据的人工智能 ...