JS---案例：点击按钮摇起来 & 星星闪动（挺难看的）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

案例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---案例：点击按钮摇起来 & 星星闪动（挺难看的）的更多相关文章

js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
js实现点击按钮传值
js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
使用js实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
原生 js 实现点击按钮复制文本
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容,原以为差不多,结果发现根本行不通尝试了各种办法,最后使了个障眼法,实现了下面的效果一.原理 ...
JS实现点击按钮，下载文件
PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦.excel啦都是一样) 有两 ...
原生JS 实现点击按钮创建元素
要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...
js实现点击按钮弹出上传文件的窗口
转自:https://www.jb51.net/article/100916.htm 1.详细描述在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 ...
js实现点击按钮实现上一张下一张相册滚动效果
/****判断图片是否构成滚动效果*/$(function(){ if($("#bar").find('img').size()*71<=$("#bar&qu ...
利用JS实现点击按钮后图片自动切换
我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)< ...

随机推荐

Ajax在IE浏览器会出现中文乱码解决办法
在AJAX浏览器来进行发送数据时,一般它所默认的都是UTF-8的编码. Ajax在IE浏览器会出现中文乱码的情况!解决办法如下 <script type="text/javascrip ...
datatables 前端表格插件增删改查功能
官方网站:http://datatables.club/example/css引入的<link rel="stylesheet ...
POJ 2186
Popular Cows Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 22189 Accepted: 9076 Des ...
Swift 自己主动引用计数机制ARC
Swift 使用自己主动引用计数(ARC)这一机制来跟踪和管理你的应用程序的内存.通常情况下,Swift 的内存管理机制会一直起着作用,你无须自己来考虑内存的管理.ARC 会在类的实例不再被使用时,自 ...
c语言，strcmpi(),将一个串中的一部分与另一个串比较, 不管大小写
#include<stdio.h> #include<string.h> 函数名: strncmpi 功能: 将一个串中的一部分与另一个串比较, 不管大小写用法: int ...
读取Excel数据绑定到Gridview进行显示
读取Excel数据绑定到Gridview进行显示示例代码. 读取excel代码 /// <summary> /// 读取Excel /// authon:codeo.cn /// < ...
SpringMVC常见面试题总结
1.什么是Spring MVC ?简单介绍下你对springMVC的理解? Spring MVC是一个基于MVC架构的用来简化web应用程序开发的应用开发框架,它是Spring的一个模块,无需中间整合 ...
Chakra TypedArray代码实现笔记
ArrayBuffer.cpp阅读对象继承关系 JavascriptArrayBuffer: ArrayBuffer: ArrayBufferBase: DynamicObject: Recycla ...
mac-Navicat Premium 12连接Oracle
安装及破解: https://pan.baidu.com/s/1ip0oM9p856k34t3cIExa7Q(提取码请留言) Navicat连接了Oracle数据库测试连接失败,提示:hostnam ...
Dog test1 = new Dog()的解释