web点击页面出现图案（小星星）
<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);
// 创建星星
let star = document.createElement("img")
//写入属性
star.setAttribute("src","../img/starsel.png")
// 随机宽高
let width = parseInt(Math.random()*30)+20;
star.style.width = width+"px";
star.style.height = width+"px";
// 设置元素样式
star.style.left = e.clientX-(width/2)+"px";
star.style.top = e.clientY-(width/2)+"px";
// 创建好的星星插入文档
let end = document.getElementById("end");
document.body.insertBefore(star, end);
//
setTimeout(function(){
star.remove()
},1000)
}
</script>
web点击页面出现图案（小星星）相关推荐
- .net web 点击链接在页面指定位置显示DIV的问题
.net web 点击链接在页面指定位置显示DIV的问题 做了一个网页,放了两个DataList ,一个显示科室,一个显示科室中的人员,由于科室太多,一屏显示不全,为了在页面刷新时记住上次浏览位置,所 ...
- HTML下拉菜单去掉点,jQuery点击页面其他部分隐藏下拉菜单功能
一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...
- 将WebApiTestClient添加到ASP.NET Web API帮助页面
ASP.NET Web API帮助页面是一种有用的扩展,可为您的Web API自动生成基于Web的文档.它使调试变得更容易,因为您可以将帮助页面中的信息复制/粘贴到Fiddler等工具中,以调用Web ...
- 手机Web前端调试页面之——Chrome DevTools（谷歌浏览器）的模拟手机调试
Chrome DevTools(谷歌浏览器)的模拟手机调试 前言 在客户端开发中,由于使用手机app加载webview页面,客户端与前端经常会出现数据交互情况: 但是在手机中无法调试看到前端代码的步骤 ...
- python 自动点击网页上按钮_python selenium自动化（一）点击页面链接测试
需求:现在有一个网站的页面,我希望用python自动化的测试点击这个页面上所有的在本窗口跳转,并且是本站内的链接,前往到链接页面之后在通过后退返回到原始页面. 要完成这个需求就必须实现3点: 1. 找 ...
- jquery实现点击页面其他地方隐藏指定元素
代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> < ...
- 点击页面空白处就关闭某个层是怎么做到的
如果用document事件的话,那点那个层里面也会触发,这不是想要的结果,怎么能做到点击除了那个层内部的区域外的任何地方,就触发事件 --------------------------------- ...
- 微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（2）：处理异步调用中的异常...
本文来自<ASP.NET AJAX程序设计 第II卷:客户端Microsoft AJAX Library相关>的第三章<异步调用Web Service和页面中的类方法>,请同时 ...
最新文章
- 操作系统导论部分章节习题
- CSS 背景(background)（背景颜色color、背景图片image、背景平铺repeat、背景位置position、背景附着、背景简写、背景透明、链接导航栏综合案例）
- oracl 、mysql在线查看文档
- spring MVC项目中，欢迎页首页根路径
- sklearn.feature_extraction.text.CountVectorizer 学习
- g120变频器报7490怎么处理_西门子通讯profinet网络下怎么更换G120变频器等部件
- 4g ecgi 编码_4G学习之IMSI附着
- Doors Breaking and Repairing
- django crm 03
- 解决‘C:\Program‘ 不是内部或外部命令，也不是可运行的程序或批处理文件
- P1332,nssl1316-血色先锋军【bfs】
- 【Python】利用pip下载Django超时失败的解决方法
- 利用fiddler给android模拟器抓包
- 【连载】人类唯一的出路：变成人工智能（二）脑机接口
- 【matlab】安装 webcam 支持
- ArcGIS中的 .tpk数据
- 正则表达式网络三剑客之awk
- mybatisplus-代码级别的自动生成创建丶更新时间
- jQuery Fancybox插件介绍
- 封号、扣钱：谁来保证专车司机的利益？