javascript练习案例--消失的星星

要求

(1)新建HTML文件xingxing.html。

(2)效果要求。

每隔一秒在屏幕中随机出现一颗任意大小的星星。
用鼠标单击星星时，星星消失。

(3)需要用到知识：

创建元素；设置元素属性或修改元素属性；Math.Random随机函数；为对象添加鼠标单击动作函数(可以通过设置属性方式添加)；窗口的定时器方法setTimeout()等。

效果

素材

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>消失的星星</title><script type="text/javascript">//定义星星的x、y坐标的最大值和最小值var y_top = 0;var y_bottom = 0;var x_left = 0;var x_right =0;//设置星星最大和最小宽度var img_width_max=80;var img_width_min =10;function init(){//获取满天星//设置网页背景色document.body.bgColor="#000";//获取星星在可视区域的最大的宽度和高度x_right =window.innerWidth-img_width_max;y_bottom =window.innerHeight-img_width_max;//定时器：每1秒执行1次setInterval("start()",1000);}function start(){//随机输出星星//创建img节点var node_img = document.createElement("img");//在body中增加img标签document.body.appendChild(node_img);//为img节点增加src属性，并赋值node_img.setAttribute("src","images/xx02.png");//星星图片//随机获取星星的宽度var width = getRandom(img_width_max,img_width_min);//随机获取星星在可视区域的x和y坐标var x = getRandom(x_left,x_right);var y = getRandom(y_top,y_bottom);//为星星设计css样式var str = "position:absolute;width:"+width+"px;top:"+y+"px;left:"+x+"px;";node_img.setAttribute("style",str);node_img.setAttribute("onclick","removeImg(this)");//当点击星星时，星星消失}function getRandom(max1,min1){//随机获取数值return Math.floor(Math.random()*(max1 - min1)+min1);}function removeImg(obj){//消星星document.body.removeChild(obj) ;}</script>
</head>
<body onload="init()"></body>
</html>

javascript练习案例--消失的星星相关推荐

JavaScript 时钟案例
今天我要分享的JavaScript时钟案例的知识点创建一个文件夹里面在创建一个css和js的文件夹,把css和js引入,然后开始写html,在body里添加div标签设置类,div标签里放一个spa ...
JavaScript的案例：模拟聊天界面发送信息
JavaScript的案例:模拟聊天界面发送信息这是我第一次写博客,也是一位刚入门的前端菜鸟!希望大家多多帮助与支持! 1.如图所示:点击下面头像即可切换用户,这也是我和我女朋友用的第一个情侣头像, ...
javascript案例27——打印星星、正三角星星、倒三角星星等
一. 案例描述1 打印矩形, 要求每次只能输出一个☆( 采用for). ☆☆☆☆☆ ☆☆☆☆☆ ☆☆☆☆☆ ☆☆☆☆☆ 案例效果演示1 js代码1 var str = '';// 外层控制行数for ...
JavaScript项目案例
简单案例案例一:完成"鼠标经过切换图片"的案例案例二:完成"百度换肤效果"的案例案例三:完成"鼠标展示"的案例案例四:完成" ...
JavaScript小案例程序保存（完整代码+效果展示）
1.案例--点击button换照片 html部分 <!DOCTYPE html> <html lang="en"> <head><meta ...
Javascript小案例（一）：仿淘宝搜索框用户输入事件的实现
淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: (截图日期:2017年6月18日) 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋 ...
JavaScript基础案例+代码
学如逆水行舟,不进则退.在学习JavaScript的过程中,我发现只有把一些基本的练习题练熟,自己才能更好的理解每一个知识点,所以我整理了一些学习视频中的基础题,以便自己随时脑补代码. 1. 显示或隐 ...
jQuery 小白都能秒懂的案例1：星星评价特效
讲 jQuery,用了个例子,星星评价.我 f4,真的是临时想到做这个的. 毕竟 jQuery 太熟悉了,从 1.2 开始用到现在的 3.x.而且这个案例也很简单,如图所示. 主要功能就是点击星星,获 ...
Python：模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...
【Flutter从入门到实战】⑪、豆瓣案例-1、星星评分Widget、虚线Widget、TabbarWidget、BottomNavigationBarItem的封装、初始化配置抽取
Flutter从入门到实战一共分为23个系列 ①(Flutter.Dart环境搭建篇) 共3个内容已更新 ②(Dart语法1 篇) 共4个内容已更新 ③(Dart语法2 篇) 共2个内容已更新 ...

javascript练习案例--消失的星星

要求

效果

素材

代码

javascript练习案例--消失的星星相关推荐

最新文章

热门文章