实例：随机显示小星星

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS实例_随机显示小星星</title><script type="text/javascript">//实例：随机显示小星星/* 1，网页背景色2，创建图片节点，追加到<body>父节点3，图片随机大小4，图片随机定位坐标5，定时器6，网页加载完成，开始出星星7，星星显示的范围，此处跟窗口宽高一样，(0,window.innerWidth)8,点击星星，删除此星星*///网页加载完成window.onload = function () {document.body.bgColor = "#000";//背景色为黑window.setInterval("star()", 1000);//定时器}function star() {var imgObj = document.createElement("img");//创建星星节点imgObj.setAttribute("src", "images/th11.jpg");//添加图片的属性//添加width属性，getRandom()随机数函数var width = getRandom(1, 40);imgObj.setAttribute("width", width);//添加style属性,添加星星的定位，随机产生星星的定位,且保证星星不会到窗口外var x = getRandom(0, window.innerWidth - width);var y = getRandom(0, window.innerHeight - width);imgObj.setAttribute("style", "position:absolute;left:" + x + "px;top:" + y + "px;");//添加onclick事件属性,点击星星时消失imgObj.setAttribute("onclick", "removeImg(this)");/* this是系统关键字，this只能在函数中使用，是一个对象，含义为当前对象,用户选择到的对象 */document.body.appendChild(imgObj);//将图片节点，挂到<body>父节点下}function getRandom(min, max) {//随机数函数var random = Math.random() * (max - min) + min;//随机数random = Math.floor(random);//向下取整return random;}function removeImg(obj) {//删除img节点函数document.body.removeChild(obj);}</script></head><body></body></html>

显示效果如下：

用到的小星星图片如下：

@沉木

前端：JS/26/实例：随机显示小星星相关推荐

java星星随机下落_随机显示星星(点击可删除)
随机显示星星 //实例:随机显示小星星 /*(1)网页加载完成,背景颜色为黑色 (2)创建图片节点,并追加到body父节点下 (3)定时器 (4)星星随机大小 (5)星星随机定位 (6)单机星星,星星 ...
【文件上传漏洞-03】前端JS检测与绕过实例—以upload-labs-1为例
目录 1 前端JS检测与绕过 2 前端JS检测与绕过实例 2.1 实验目的 2.2 操作环境 2.3 前期准备 2.4 具体过程 2.4.1 文件上传前期盲测 2.4.2 方法一:删除JS直接上传 2 ...
vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码?
郎朗坤废话不多说了,直接给大家贴代码了,完整代码: vue点击切换显示隐藏 {{item.name}} {{subItem.name}} 以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐 ...
如是使用JS实现页面内容随机显示
之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...
风尚云网前端-js随机生成自定义位随机字符
风尚云网前端-js随机生成自定义位随机字符废话不多说: 上代码 // 随机生成随机数randomPassword(size) {var seed = new Array("A" ...
【前端】ionic4 card卡片显示随机颜色
前言小编在前端项目中,需要将不同的作答记录信息卡片,显示不同的颜色,这个效果用到了随机器的生成和typeScript中的集合,以及html中的[ngStyle]属性. 卡片随机颜色实现记 ...
HTML完成如下网页效果代码,JS实现可直接显示网页代码运行效果的HTML代码预览功能实例...
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大家供大家参考.具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击&qu ...
js直接显示html,JS实现可直接显示网页代码运行效果的HTML代码预览功能实例.pdf...
JS实实现现可可直直接接显显示示网网页页代代码码运运行行效效果果的的HTML代代码码预预览览功功能能实实例例本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大供大参 ...
图片随机出现的HTML代码,JS随机显示网页图片的简单代码
如果你想在网页中显示几张图片中的任何一张,即随机显示图片,那么,可以使用如下很简单的代码. 前提条件为:图片均为gif格式的,存放在网站的Img/Gif/JSpc/目录中. 代码如下: var m=9 ...

前端：JS/26/实例：随机显示小星星

实例：随机显示小星星

@沉木

前端：JS/26/实例：随机显示小星星相关推荐

最新文章

热门文章