案例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. 学会使用这些，你的Windows可能会焕然一新

    星选哥用Windows也已经好多年了,今天用室友的电脑才发现,桌面真可以影响一个人的心情,从而影响工作,学习,生活. 所以准备推荐一些好用且轻量的小工具,让你时时刻刻有个好心情. 室友的桌面(还有很多 ...

  2. python基础-网络编程part01

    软件开发架构 C/S(Client / Server) 架构 概念:是一种软件系统体系结构.Client是客户端,Server是服务端.客户端需要安装专用的客户端软件. 比如:微信.QQ.王者荣耀等应 ...

  3. 10-kubernetes serveraccount RBAC

    目录 认证安全 serviceAccountName 和 userAccount serviceaccount 创建 使用admin 的SA 测试 URL访问kubernetes资源 APIserve ...

  4. C# partial 关键字分析

    简单的来说 partial是局部类型的意思 就是说有这个关键字的类.结构或接口可以写成几个部分 比如 public partial class Program { static void Main(s ...

  5. 深入理解inode和硬链接和软连接和挂载点

    inode 一.inode是什么? 理解inode,要从文件储存说起. 扇区 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5 ...

  6. Nginx+MySQL+PHP+Redis多机部署（测试发布discuz论坛）

    链接:LNMP+Redis单机部署 1.实战多机部署环境 nginx服务器: 192.168.1.3 php服务器:    192.168.1.4 mysql服务器: 192.168.1.10 red ...

  7. 如何使用Git命令克隆仓库代码

    今天我的电脑装了新系统,刚装了Git到电脑上,突然有一个大胆的想法,以后不适用可视化工具了. 要逐步锻炼我的命令的操作能力,不能太依赖可视化工具. 今天先记录一下如何使用git命令克隆仓库代码 git ...

  8. 图的存储结构与操作--C语言实现

    图(graph)是一种比树结构还要复杂的数据结构,它的术语,存储方式,遍历方式,用途都比较广,所以如果想要一次性完成所有的代码,那代码会非常长.所以,我将分两次来完成图的代码.这一次,我会完成图的五种 ...

  9. 代码自动机（攻 ACwing 限时题）

    #include<bits/stdc++.h> #include<windows.h> using namespace std; int tot=0; void an(int ...

  10. HC大会，华为联合合作伙伴发布一站式物联网IoT开发工具小熊派BearPi

    传统的物联网产品开发步骤复杂,涉及硬件开发.软件开发.云端开发等众多流程.而且产品的开发周期长.开发成本高.产品稳定性不佳.维护成本高.而物联网设备本身市场竞争激烈,价格低,设备更新迭代快,所以在保证 ...