JS实现随机生成球在页面弹动

<body>

<div class="dian">

<input type="button" value="点我一下试试!">

</div>

<script>

let clickInput = document.querySelector("input");

let randomTop, randomLeft, vx, vy, moveDiv, timer

clickInput.addEventListener("click", () => {

moveDiv = document.createElement("div");

document.body.appendChild(moveDiv);

randomTop = parseInt(Math.random() * (innerHeight - 99));

randomLeft = parseInt(Math.random() * (innerWidth - 99));

moveDiv.style.top = randomTop + "px";

moveDiv.style.left = randomLeft + "px";

vx = 1;

vy = 1;

timer = setInterval(() => {

randomTop += vx;

randomLeft += vy;

moveDiv.style.top = randomTop + "px";

moveDiv.style.left = randomLeft + "px";

if (randomTop >= (innerHeight - 99) || randomTop <= 0) {

vx = -vx;

}

if (randomLeft >= (innerWidth - 99) || randomLeft <= 0) {

vy = -vy;

}

}

, 1)

})

</script>

</body>

原文地址:https://www.cnblogs.com/weijiangZ/p/12116901.html

时间: 2024-08-02 09:41:19

JS实现随机生成球在页面弹动的相关文章

js选择颜色小游戏(随机生成不含重复数字的数组,通过数组中的数控制定义好的数组)

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js网页版小游戏</title> <style media="screen"> .wrap { width: 577px; outline: 1px solid hotpink; margin: 100px auto; box-shadow: 0 0 5px; } .

js随机生成4位验证码

方法一: /*随机生成4位验证码*/ /*step1:将所有字母,数字装入一个数组备用*/ var codes=[]; //数字:48-57;unicode编码 for(var i=48;i<57;codes.push(i),i++); /*console.log(codes);*/ //大写字母:65-90;unicode编码 for(var i=60;i<90;codes.push(i),i++); //小写字母:97-122;unicode编码 for(var i=97;i<122

js随机生成N位数

function RondomPass(number){ var arr = new Array; var arr1 = new Array("0","1","2","3","4","5","6","7","8","9"); for(var i=0;i<number;i++){ var n = Math

selenium + python自动化测试unittest框架学习(七)随机生成姓名

在自动化测试过程中经常要测试到添加用户的操作,每次都要输入中文,原本是找了十几个中文写成了列表,然后从列表中随机取出填入用户名文本框中,随着测试的增加,发现同名的人搜索出来一大堆,最后在网上找了个随机生成姓名的方法,在此记录下,学习来源:https://segmentfault.com/q/1010000006941249 姓氏和名字的列表: import random import string last_names = ['赵', '钱', '孙', '李', '周', '吴', '郑',

随机生成常用汉字

背景知识 GB 2312-80 是中国国家标准简体中文字符集,全称<信息交换用汉字编码字符集·基本集>,由中国国家标准总局发布,1981年5月1日实施.GB2312 编码通行于中国大陆:新加坡等地也采用此编码.中国大陆几乎所有的中文系统和国际化的软件都支持 GB 2312. GB2312 标准共收录 6763 个汉字,其中一级汉字 3755 个,二级汉字 3008 个:同时收录了包括拉丁字母.希腊字母.日文平假名及片假名字母.俄语西里尔字母在内的 682 个字符.GB2312 的出现,基本满足

JavaScript随机生成颜色的方法

JavaScript随机生成颜色的方法 这篇文章主要介绍了JavaScript随机生成颜色的方法的相关资料,非常不错,代码简单易懂,具有参考借鉴价值,需要的朋友可以参考下 废话不多说了直接给大家贴js代码了,具体代码如下所述: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <!DOCTYPE html> <html>

15-07-08 数组-- 手机号抽奖、福利彩票随机生成

1.手机号抽奖 Console.WriteLine("请输入手机号的个数:"); int a = Convert.ToInt32(Console.ReadLine()); string[] sj = new string[a]; for (int i = 0; i < a; i++) { Console.WriteLine("请输入第{0}个手机号:", i + 1); sj[i] = Console.ReadLine(); } Console.WriteLi

PHP生成HTML静态页面的方法

从PHP生成HTML静态页面并存储到以年份和月份为名称创建的目录.读取全部数据批量生成,全部生成后弹出提示.可指定批次生成数量,建议不超过800,否则执行速度会有问题. 为jbxue.com网站功能而开发,代码为本人原创,生成速度一般. (出于众所周知的原因,涉及到数据库的数据字段名称做了改动,并且为了代码明晰去掉了参数过滤的部分) 说明:原动态地址为 moban.php?id=1 ,生成后地址为 html/200808/sell_1.html .page.php为分页程序,本博客中有发布. 页

bobojavascript、asp.net 实现随机生成验证码

一些网站中都有登录页面,登录时输入正确的验证码才可以,废话不多说,今天就用javascript 和异步来实现自动生成图片验证码的功能. 首先我们要插入一个一般处理程序(也就是ashx的文件,这里我给它起名为WaterMark.ashx) 这个文件所包括的引用: using System;        using System.Web;        using System.Drawing;        using System.Drawing.Drawing2D;        using