【前端】纯前端的一个‘喜欢我吗?’
前端 一个 喜欢
2023-09-11 14:19:25 时间
喜欢❤
不喜欢→_→
这是我模仿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 onmousedown="mDown(this)" onmouseup="mUp(this)" id="boxleft"> 喜欢❤ </div> <div onmousedown="mDown(this)" onmouseup="mUp(this)" onmouseover="mOver(this)" onmouseout="mOut(this)" id="boxright"> 不喜欢→_→ </div> </div> </body> </html>
相关文章
- 前端每日实战:134# 视频演示如何用 CSS 和 GSAP 创作一个树枝发芽的 loader
- 前端每日实战:144# 视频演示如何用 D3 和 GSAP 创作一个集体舞动画
- 有了 serverless,前端也可以快速开发一个 Puppeteer 网页截图服务
- Web前端 -- 利用Babel来将ES6转化为ES5代码
- python使用PIL处理图片后返回给前端的坑
- 前端三剑客:html,css,JavaScript
- [FE] 有效开展一个前端项目-V1 (gulp/angular)
- 使用开源微前端框架 Luigi 创建一个基于微前端架构的工程
- 如何找到一个前端事件对应的事件处理函数
- 介绍一个前端页面开发必备神器,chrome扩展,设备模拟器
- 慕课网前端项目:Vue2.0+Node.js+MongoDB全栈打造商城系统 笔记 整理【4/18】
- AI:一个20年程序猿的学习资料大全—前端/后端/架构师/运维各种很多教程资料——只有你不想要的,没有你找不到的
- 野生前端的数据结构基础练习(8)——图
- 前端MVC Vue2学习总结(九)——Vuex状态管理插件
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- 前端网络基础 - axios使用
- 一个后台管理系统的界面样式和前端代码增删查改
- 前端面经——html篇
- 从前端到后台,开发一个完整功能的小程序