【前端】纯前端的一个‘喜欢我吗？’

喜欢❤

不喜欢→_→

　　这是我模仿DIYGOD做的一个‘臭不要脸的喜欢我吗？’，哈哈哈哈哈有点意思。

-我从未见过如此厚颜无耻之人！

　　只是纯前端的代码。不能记录喜欢的数量。复习了一下js代码（还是很生疏的感觉）。

　　随便求厉害的人指教！

<html>
<script>
function mOver(obj) {obj.innerHTML = "喜欢❤"obj.style.backgroundColor = "red";obj.style.color = "#fff";document.getElementById("boxleft").innerHTML = "不喜欢→_→ "document.getElementById("boxleft").style.backgroundColor = "#fff";document.getElementById("boxleft").style.color = "red";
}function mOut(obj) {obj.innerHTML = "不喜欢→_→ "obj.style.backgroundColor = "#fff";obj.style.color = "red";document.getElementById("boxleft").innerHTML = "喜欢❤";document.getElementById("boxleft").style.backgroundColor = "red";document.getElementById("boxleft").style.color = "#fff";
}function mDown(obj) {obj.style.backgroundColor = "#444";
}function mUp(obj) {obj.style.backgroundColor = "red";obj.style.color = "#fff";document.getElementById("mybox").innerHTML = "</br>我也喜欢你（//▽//）";
}
</script>
<style type="text/css">
#mybox {cursor:pointer;margin:0 auto;text-align: center;padding: 20px;font: bold 15px arial, "微软雅黑";width: 255px;height:50px;
}#boxleft {float: left;padding: 20px;width: 87px;color: #fff;background: red;
}#boxright {padding: 20px;color: red;width: 87px;float: right;background: #fff;
}
</style><body ><div id="mybox"><div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" id="boxleft">喜欢❤</div><div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" id="boxright">不喜欢→_→ </div></div>
</body></html>

【前端】纯前端的一个‘喜欢我吗？’相关推荐

web前端-纯前端音频剪辑，vue音频编辑组件
本文包含内容概述: 整理总结的音频相关资料音频相关jsapi说明及示例 vue编写的组件及git项目地址在线预览: http://123.57.178.145:5007/audio_edit/in ...
用500行纯前端代码在浏览器中构建一个Tableau
2019独角兽企业重金招聘Python工程师标准>>> 在Gartner最新的对商务智能软件的专业分析报告中,Tableau持续领跑.Microsoft因为PowerBI表现出色也处 ...
纯前端JS实现一个登记照改换底色背景色功能
说到登记照改换底色功能的实现,我想大部分人都会认为使用opencv或者机器学习方法对图像进行图像分割.边缘检测.基于语义的物体检测.无监督的像素分类算法等等算法是最好的途径. 而我最近实现了一个登记照 ...
解决页面间体验问题的纯前端容器Lath
提到前端你最先想到什么?前端工程?web?JavaScript.CSS.HTML? 前端性能现状如果站在用户的视角那是他们距离信息最近的地方,无论前端在生产技术上如何演变,最终服务于信息表达的根本不 ...
纯前端语言编写音乐播放器
纯前端语言编写音乐播放器 html代码 index.html <!DOCTYPE html> <html lang="en"><head>< ...
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
文章目录前言第一回合一.知识点:cookie(21/09/06) 二.知识点:节流和防抖(21/09/07) 三.知识点:var和let以及const(21/09/08) 四:知识点:深拷贝和浅 ...
仿qq邮箱源码程序_QQ微信头像制图工具箱小程序纯前端源码
今天在网上看到了一个微信小程序源码,经测试QQ小程序也可以完美运行,所以给大家分享一下这个QQ微信头像制图工具箱小程序纯前端源码. 主要功能有文字九格.头像挂件生成.爆趣九宫格.形状九宫格.创意长图. ...
纯前端H5小应用_localStorage存储
开发缘由[需求发现和分析] 想要送朋友一个礼物,但是想了想,街上买的东西,em~,我们这样的猿确实不会选礼物啊,由此就想利用自己手中的工具和知识做点有用的东西吧,抱枕是礼物,钢笔是礼物,电子产品也是礼 ...
cropper.js 图像旋转问题_JavaScript开源良心插件，纯前端网页图片剪裁插件——cropperjs...
介绍 cropperjs是一款基于JavaScript的网页端图片裁剪插件,可能相对于图片预览来说,图片的裁剪使用场景貌似并不是很多,但是图片预览插件又要比裁剪插件容易找到,而且从实现难度上来说也不及 ...

【前端】纯前端的一个‘喜欢我吗？’

-我从未见过如此厚颜无耻之人！

-我从未见过如此厚颜无耻之人！

-我从未见过如此厚颜无耻之人！

【前端】纯前端的一个‘喜欢我吗？’相关推荐

最新文章

热门文章