长相思追剧小游戏
看效果图
Vue长相思
刚学Vue，正好在追剧，看到这个小案例觉得挺好玩的，第一天学，代码太简陋了
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script src="../vue.js"></script>
<style>.box {/* width: 1200px; */height: 500px;display: flex;flex-direction: column;border: rgb(235, 137, 137) solid 3px;border-radius: 33px;}h1,.title {text-align: center;background: linear-gradient(to right, red, rgb(183, 0, 255), blue);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.body {display: flex;justify-content: space-around;/* background-color: aqua; */}img {width: 200px;height: 300px;}.row {width: 210px;padding-right: 1%;border-right: 1px blueviolet dashed;}.row:last-child {padding-right: 20px;border-right: none;}h3 {text-align: center;}
</style><body><div id="app"><div class="box"><h1 class="title">长相思追剧小游戏</h1><div class="body"><div class="row1 row"><img src="./img/张晚意.jpg" alt=""><h3>苍玄 </h3><button @click="fn(1,0)">罚站+1</button><span>{{result}}:{{result_time}}min </span><button @click="fn(0,1)">坐下+1</button></div><div class="row2 row"><img src="./img/相柳.jpg" alt=""><h3> 相柳 </h3><button @click="fn(1,0)">罚站+1</button><span>{{result}}:{{result_time}}min </span><button @click="fn(0,1)">坐下+1</button></div><div class="row3 row"><img src="./img/涂山璟.jpg" alt=""><h3>涂山璟</h3><button @click="fn(1,0)">罚站+1</button><span>{{result}}:{{result_time}}min </span><button @click="fn(0,1)">坐下+1</button></div><div class="row4 row"><img src="./img/赤水丰隆.jpg" alt=""><h3>赤水丰隆</h3><button @click="fn(1,0)">罚站+1</button><span>{{result}}:{{result_time}}min </span><button @click="fn(0,1)">坐下+1</button></div></div></div><p style="margin-top:100px ;">罚站和坐下 可以变颜色</p></div>
</body><script>const app = new Vue({el: '.row1',data: {result: '咋办',result_time: 0,fail_time: 0,succeed_time: 0,},methods: {fn(ft, st) {this.fail_time += ft;this.succeed_time += stthis.result_time = this.fail_time - this.succeed_timeif (this.result_time > 0) {this.result = '罚站';}else {this.result = "坐下";this.result_time = -this.result_time}console.log(this);}}})const app2 = new Vue({el: '.row2',data: {result: '咋办',result_time: 0,fail_time: 0,succeed_time: 0,},methods: {fn(ft, st) {this.fail_time += ft;this.succeed_time += stthis.result_time = this.fail_time - this.succeed_timeif (this.result_time > 0) {this.result = '罚站';}else {this.result = "坐下";this.result_time = -this.result_time}console.log(this);}}})const app3 = new Vue({el: '.row3',data: {result: '咋办',result_time: 0,fail_time: 0,succeed_time: 0,},methods: {fn(ft, st) {this.fail_time += ft;this.succeed_time += stthis.result_time = this.fail_time - this.succeed_timeif (this.result_time > 0) {this.result = '罚站';}else {this.result = "坐下";this.result_time = -this.result_time}console.log(this);}}})const app4 = new Vue({el: '.row4',data: {result: '咋办',result_time: 0,fail_time: 0,succeed_time: 0,},methods: {fn(ft, st) {this.fail_time += ft;this.succeed_time += stthis.result_time = this.fail_time - this.succeed_timeif (this.result_time > 0) {this.result = '罚站';}else {this.result = "坐下";this.result_time = -this.result_time}console.log(this);}}})</script></html>
优化方向
1.“罚站”和“坐下”的颜色可以改变
2.块结构不对吧，row应该用li
3.笨笨地定义了4个对象，不然，点击人物按钮，其他任务的时长也会变；但肯定有优化的办法，就emmm，类似this.result++ 但是具体的还不会哎
4.每次刷新网页，之前的记录会保留下来，好像是设置DOM啥的，回头在复习一下，都忘记了
相关文章：
长相思追剧小游戏
看效果图 Vue长相思 刚学Vue，正好在追剧，看到这个小案例觉得挺好玩的，第一天学，代码太简陋了 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name&qu…...
leetcode做题笔记51
按照国际象棋的规则，皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上，并且使皇后彼此之间不能相互攻击。 给你一个整数 n ，返回所有不同的 n 皇后问题 的解决方案。 每一种…...
Windows同时安装两个版本的JDK并随时切换，以JDK6和JDK8为例，并解决相关存在的问题（亲测有效）
Windows同时安装两个版本的JDK并随时切换，以JDK6和JDK8为例，并解决相关存在的问题（亲测有效） 1.下载不同版本JDK 这里给出JDK6和JDK的百度网盘地址，具体安装过程，傻瓜式安装即可。 链接：http…...
【ChatGPT辅助学Rust | 基础系列 | Cargo工具】Cargo介绍及使用
文章目录 前言一，Cargo介绍1，Cargo安装2，创建Rust项目2，编译项目：3，运行项目：4，测试项目：5，更新项目的依赖：6，生成项目的文档…...
全面了解CPU Profiler：解读CPU性能分析工具的核心功能与用法
关于作者：CSDN内容合伙人、技术专家， 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ，擅长java后端、移动开发、人工智能等，希望大家多多支持。 目录 一、导读二、概览三、使用3.1 通过调用系统API3.2 通过Android Stu…...
rust format!如何转义{},输出{}？
在Rust中，如果你想要在字符串中包含花括号 {} ，你需要使用双花括号 {{}} 来进行转义。这是因为单个花括号 {} 在字符串中表示占位符，用于格式化字符串。 以下是一个示例： fn main() {let text "这是一个示例： {…...
真人AI写真的制作方法-文生图换脸
AI写真最近火起来了，特别是某款现象级相机的出现，只需要上传自己的照片，就能生成漂亮的写真照，这一产品再次带火了AI绘画。今天我就来分享一个使用Stable Diffusion WebUI制作真人AI写真的方法，不用训练，快…...
vscode如何包含第三方库
方法1：使用C Extension 在include 的 rapidjson的头文件时，vscode会提示找不到的问题 悬停，点击黄色提示 Edit "includePath" setting Include Path，输入rapidjson的include路径 /Users/xxx/workspaces/rapidjson-1.1.…...
【Docker】Docker安装Consul
文章目录 1. 什么是Consul2. Docker安装启动Consul 点击跳转：Docker安装MySQL、Redis、RabbitMQ、Elasticsearch、Nacos等常见服务全套（质量有保证，内容详情） 1. 什么是Consul Consul是HashiCorp公司推出的开源软件，提…...
《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(20)-Fiddler精选插件扩展安装让你的Fiddler开挂到你怀疑人生
1.简介 Fiddler本身的功能其实也已经很强大了，但是Fiddler官方还有很多其他扩展插件功能，可以更好地辅助Fiddler去帮助用户去开发、测试和管理项目上的任务。Fiddler已有的功能已经够我们日常工作中使用了，为了更好的扩展Fiddler，…...
计算机top命令
top 快捷键 1 核心参数 1 1 参考资料 [1]. https://blog.csdn.net/weixin_45465395/article/details/115728520 [2].https://www.cnblogs.com/liushui-sky/p/13224762.html...
DevExpress WPF Tree List组件，让数据可视化程度更高！（二）
DevExpress WPF Tree List组件是一个功能齐全、数据感知的TreeView-ListView混合体，可以把数据信息显示为REE、GRID或两者的组合，在数据绑定或非绑定模式下，具有完整的数据编辑支持。 在上文中（点击这里回顾DevExpress WPF Tree …...
lc1074.元素和为目标值的子矩阵数量
创建二维前缀和数组 两个for循环，外循环表示子矩阵的左上角（x1,y1），内循环表示子矩阵的右下角（x2,y2） 两个for循环遍历，计算子矩阵的元素总和 四个变量，暴力破解的时间复杂度为O(…...
elementUi el-radio神奇的:label与label不能设置默认值
问题：最近项目遇到一个奇葩的问题：红框中列表的单选按钮无法根据需求设置默认选中，但是同样是设置开启状态的单选框可以设置默认状态 原因：开始同样是和开启/关闭状态一样也把红框中列表的默认值设置为数字模式，但是由…...
git仓库清理
关于git仓库的清理，主要就是清理git仓库里面的大的二进制文件。网上查了很多教程，很多都是用：git filter-branch.清理仓库中的大文件。 我尝试着本地测试了一下，发现是真慢呀。 方法一、git filter-branch step1：查…...
从0到1开发go-tcp框架【3-读写协程分离、引入消息队列、进入连接管理器、引入连接属性】【基础篇完结】
从0到1开发go-tcp框架【3-读写协程分离、引入消息队列、进入连接管理器、引入连接属性】 1 读写协程分离[v0.7] 添加一个Reader和Writer之间通信的channel添加一个Writer goroutineReader由之前直接发送给客户端改为发送给通信channel启动Reader和Writer一起工作 zinx/znet/co…...
python-爬虫作业
# -*- coding:utf-8 -*-Author: 董咚咚 contact: 2648633809qq.com Time: 2023/7/31 17:02 version: 1.0import requests import reimport xlwt from bs4 import BeautifulSoupurl "https://www.dygod.net/html/gndy/dyzz/" hd {user-Agent:Mozilla/4.0 (Windows N…...
vue3+ts+pinia整合websocket
文章目录 一. 目标二. 前置环境三. websocket通用模板 一. 目标 先有实时数据需要展示. 由于设备量极大且要对设备参数实时记录展示.axios空轮询不太适合. 选择websocket长连接通讯. 使用pinia原因是pinia具备共享数据性质.可以作为消息队列缓存数据,降低渲染压力.同时方便多…...
【微信小程序】保存多张图片到本地相册
<template><view class"container"><u-swiper :list"list" circular radius0 indicator indicatorModedot height950rpx></u-swiper><view class"btn btn2" click"saveFun">保存到相册</view><…...
Python Numpy入门基础（二）数组操作
入门基础（二） NumPy是Python中一个重要的数学运算库，它提供了了一组多维数组对象和一组用于操作这些数组的函数。以下是一些NumPy的主要特点： 多维数组对象：NumPy的核心是ndarray对象，它是一个多维数组对…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数 这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面，开源代码 作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）
笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型 论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机 传统的知识图谱补全（KGC）模型通过…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生，我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要，而您认真负责的教学态度，让课程的每一部分都充满了实用价值。 尤其让我…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》
这段 Python 代码是一个完整的 知识库数据库操作模块，用于对本地知识库系统中的知识库进行增删改查（CRUD）操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述 该模块…...