js实现鼠标点击飘爱心效果


Posted in Javascript onAugust 19, 2020

本文实例为大家分享了js实现鼠标点击飘爱心的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>鼠标点击特效</title>
 <link rel="stylesheet" href="https://at.alicdn.com/t/font_1743249_grf4shm1g3t.css" >
 <style>
  html {
   cursor: pointer;
  }

  h3 {
   text-align: center;
   user-select: none;
  }

  .div-box {
   width: 30px;
   height: 30px;
   font-size: 30px;
   position: absolute;
  }
 </style>
</head>

<body>
 <h3>请点击屏幕查看效果</h3>
 <script>
  window.onclick = function (e) {
   //存储需要的颜色
   let arr = ["red", "yellow", "green", "pink", "blue", "purple", "orangered"];
   //随机产生一个颜色
   let heartNum = Math.floor(Math.random() * arr.length);
   let div = document.createElement("div");
   div.setAttribute("class", "iconfont iconzan div-box");
   div.style.color = arr[heartNum];
   document.body.appendChild(div);
   //获得鼠标的x,y轴的位置,并减去自身宽高的一半,使其能够在爱心的正中心
   let x = e.pageX - div.offsetWidth / 2;
   let y = e.pageY - div.offsetHeight / 2;
   div.style.left = x + "px";
   div.style.top = y + "px";
   //获得0-1的整数
   let num = Math.round(Math.random());
   let timer = setInterval(() => {
    y -= 10;
    if (num === 0) x -= 10;
    else x += 10;
    div.style.left = x + "px";
    div.style.top = y + "px";
    //如果超出屏幕范围,则删除此节点
    if (y < -100) {
     clearInterval(timer);
     div.remove();
    }
   }, 100);
  }
 </script>
</body>

</html>

效果图如下

js实现鼠标点击飘爱心效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
js获取ajax返回值代码
Apr 30 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 #Javascript
Vue实现导航栏菜单
Aug 19 #Javascript
vue实现tab栏点击高亮效果
Aug 19 #Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 #Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 #Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 #Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 #Javascript
You might like
用文本文件制作留言板提示(下)
2006/10/09 PHP
php 面向对象的一个例子
2011/04/12 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
php实现插入排序
2015/03/29 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
python 运算符 供重载参考
2009/06/11 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Python之指数与E记法的区别详解
2019/11/21 Python
Django配置文件代码说明
2019/12/04 Python
python如何判断IP地址合法性
2020/04/05 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
企业车辆管理制度
2014/01/24 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
公司应聘求职信
2014/06/21 职场文书
父亲节活动总结
2015/02/12 职场文书
借条如何写
2015/05/26 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang