消失的星星

news/2024/11/22 13:05:05/

1.设计思路:

  1.  通过鼠标点击获取星星出现的位置
  2.  创建星星这个对象
  3. 设置星星的属性
  4. 用匿名函数实现星星在几s后消失
  5. 设置星星的样式
  6. 给星星随机宽高使星星随机变化

代码展示;

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>消失的星星</title><style type="text/css">*{margin: 0;padding: 0;}body{position: relative;}img{position: absolute;}</style></head><body><br id="end"><!-- <img src="img/starsel.png" > --><!-- 点击屏幕在鼠标点击位置出现随机大小星星 --><script type="text/javascript">document.onclick=function(e){console.log("点击了屏幕",e.clientX,e.clientY);//1、创建星星let star=document.createElement("img");//2.设置属性star.setAttribute("src","img/starsel.png");// 6、给出随机宽高let width=parseInt(Math.random()*30)+30;star.style.width=width+"px";star.style.height=width+"px";// 5.设置元素样式star.style.left=e.clientX-(width/2)+"px";star.style.top=e.clientY-(width/2)+"px";//3.将创建好的星星插入文档let end=document.getElementById("end");document.body.insertBefore(star,end);// 4.2s以后星星消失setTimeout(function(){star.remove()},10000)}</script></body>
</html>

 2.用浏览器打开,按住F12或者鼠标右键检查,鼠标在空白地方可以点击出现星星的位置,设置的是10s后消失,在console里面看鼠标位置。

3.运行结果;

 

 

 

 

 


http://www.ppmy.cn/news/544892.html

相关文章

满天都是小星星C语言答案,满天都是小星星

满天都是小星星 ——汉川市城隍镇农利小学生本课堂建设侧记 本刊记者 姜楚华 尹培文 通讯员 王荣华 在汉川市城隍镇农利小学(以下简称“农利小学”)&#xff0c;这样的场景司空见惯&#xff1a;课堂上&#xff0c;小组成员聚在一起&#xff0c;要么激烈而低声地争论着&#x…

CentOS7安装Docker(超详细)

配置要求 系统&#xff1a;Centos7 Linux 内核&#xff1a;官方建议 3.10 以上 注意&#xff1a;本文的命令使用的是 root 用户登录执行&#xff0c;不是 root 的话所有命令前面要加 sudo 1.查看当前的内核版本 uname -r2.更新 yum 包&#xff08;使用 root 权限&#xff0…

第九周项目三小星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星星

#include <iostream> using namespace std; int main() { int s,i11; for(i11;i>1;ii-2) { for(si;s>1;ss-1) cout<<"*"; cout<<endl; } cout<<endl; return 0; }

(二)容器——docker的安装(CentOs 7下进行安装)

文章目录 7.docker的安装&#xff08;CentOs 7下进行安装&#xff09;1.首先卸载旧版本的docker2.使用仓库进行安装3.设置镜像仓库4.更新yum软件包索引5.安装Docker Engine-Community&#xff08;一些相关的东西&#xff09;6.查看docker是否安装成功7.启动docker8.查看docker是…

星星

源码地址 package com.example.startest;import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.widget.RatingBar; import android.widget.RatingBar.OnRatingBarChangeListener; import android.widget.TextView;public class M…

星星星星星星

01./* 02.* Copyright (c) 2011, 烟台大学计算机学院 03.* All rights reserved. 04.* 文件名称&#xff1a;test.cpp 05.* 作 者&#xff1a;樊露露 06.* 完成日期&#xff1a;2012 年 10 月 11日 07.* 版 本 号&#xff1a;v1.0 08.* 09.* 输入描述&#xff1a;无 10.* 问题描…

打星星 空心星星

题目&#xff1a; 星星 C语言实现 #include <stdio.h> int main() {int i,j; /*i为行 j为列*/for(i1; i<4; i){for(j1;j<(4-i);j) /*给前面需要留空白的地方添加空字符串*/{printf(" ");}for(j1;j<(2*i-1);j)/*在空白后面打上合适数量的星星*/…

菱形星星

题目描述&#xff1a; 1、 菱形星星&#xff1a;接收控制台输入一个正奇整数&#xff0c;打印一个菱形[如输入数字9打印] * 1 *** 3 ***** 5 ******** 7 ***** 5 *** 3 * 1 题目注意空格&#xff0c;同时注意菱形每行的个数&#xff0c;我是将这分成上下两个部分&#xff0c;上…