当前位置： 首页 > news >正文

长相思追剧小游戏

news 2026/4/1 23:42:19

看效果图

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&#xff0c;正好在追剧&#xff0c;看到这个小案例觉得挺好玩的&#xff0c;第一天学&#xff0c;代码太简陋了 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name&qu…...

编程日记 2023/8/3 11:54:53

leetcode做题笔记51

按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回所有不同的 n 皇后问题 的解决方案。 每一种…...

编程日记 2023/8/3 11:53:52

Windows同时安装两个版本的JDK并随时切换，以JDK6和JDK8为例，并解决相关存在的问题（亲测有效）

Windows同时安装两个版本的JDK并随时切换&#xff0c;以JDK6和JDK8为例&#xff0c;并解决相关存在的问题&#xff08;亲测有效&#xff09; 1.下载不同版本JDK 这里给出JDK6和JDK的百度网盘地址&#xff0c;具体安装过程&#xff0c;傻瓜式安装即可。 链接&#xff1a;http…...

编程日记 2023/8/3 11:52:51

【ChatGPT辅助学Rust | 基础系列 | Cargo工具】Cargo介绍及使用

文章目录 前言一&#xff0c;Cargo介绍1&#xff0c;Cargo安装2&#xff0c;创建Rust项目2&#xff0c;编译项目&#xff1a;3&#xff0c;运行项目&#xff1a;4&#xff0c;测试项目&#xff1a;5&#xff0c;更新项目的依赖&#xff1a;6&#xff0c;生成项目的文档&#xf…...

编程日记 2023/8/3 11:51:49

全面了解CPU Profiler：解读CPU性能分析工具的核心功能与用法

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、使用3.1 通过调用系统API3.2 通过Android Stu…...

编程日记 2023/8/3 11:50:49

rust format!如何转义{},输出{}？

在Rust中&#xff0c;如果你想要在字符串中包含花括号 {} &#xff0c;你需要使用双花括号 {{}} 来进行转义。这是因为单个花括号 {} 在字符串中表示占位符&#xff0c;用于格式化字符串。 以下是一个示例&#xff1a; fn main() {let text "这是一个示例&#xff1a; {…...

编程日记 2023/8/3 11:49:46

真人AI写真的制作方法-文生图换脸

AI写真最近火起来了&#xff0c;特别是某款现象级相机的出现&#xff0c;只需要上传自己的照片&#xff0c;就能生成漂亮的写真照&#xff0c;这一产品再次带火了AI绘画。今天我就来分享一个使用Stable Diffusion WebUI制作真人AI写真的方法&#xff0c;不用训练&#xff0c;快…...

编程日记 2023/8/3 11:48:45

vscode如何包含第三方库

方法1&#xff1a;使用C Extension 在include 的 rapidjson的头文件时&#xff0c;vscode会提示找不到的问题 悬停&#xff0c;点击黄色提示 Edit "includePath" setting Include Path&#xff0c;输入rapidjson的include路径 /Users/xxx/workspaces/rapidjson-1.1.…...

编程日记 2023/8/3 11:47:43

【Docker】Docker安装Consul

文章目录 1. 什么是Consul2. Docker安装启动Consul 点击跳转&#xff1a;Docker安装MySQL、Redis、RabbitMQ、Elasticsearch、Nacos等常见服务全套&#xff08;质量有保证&#xff0c;内容详情&#xff09; 1. 什么是Consul Consul是HashiCorp公司推出的开源软件&#xff0c;提…...

编程日记 2023/8/3 11:46:42

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(20)-Fiddler精选插件扩展安装让你的Fiddler开挂到你怀疑人生

1.简介 Fiddler本身的功能其实也已经很强大了&#xff0c;但是Fiddler官方还有很多其他扩展插件功能&#xff0c;可以更好地辅助Fiddler去帮助用户去开发、测试和管理项目上的任务。Fiddler已有的功能已经够我们日常工作中使用了&#xff0c;为了更好的扩展Fiddler&#xff0c…...

编程日记 2023/8/3 11:45:39

计算机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...

编程日记 2023/8/3 11:44:35

DevExpress WPF Tree List组件，让数据可视化程度更高！（二）

DevExpress WPF Tree List组件是一个功能齐全、数据感知的TreeView-ListView混合体&#xff0c;可以把数据信息显示为REE、GRID或两者的组合&#xff0c;在数据绑定或非绑定模式下&#xff0c;具有完整的数据编辑支持。 在上文中&#xff08;点击这里回顾DevExpress WPF Tree …...

编程日记 2023/8/3 11:42:33

lc1074.元素和为目标值的子矩阵数量

创建二维前缀和数组 两个for循环&#xff0c;外循环表示子矩阵的左上角&#xff08;x1,y1&#xff09;&#xff0c;内循环表示子矩阵的右下角&#xff08;x2,y2&#xff09; 两个for循环遍历&#xff0c;计算子矩阵的元素总和 四个变量&#xff0c;暴力破解的时间复杂度为O(…...

编程日记 2023/8/3 11:41:32

elementUi el-radio神奇的:label与label不能设置默认值

问题&#xff1a;最近项目遇到一个奇葩的问题&#xff1a;红框中列表的单选按钮无法根据需求设置默认选中&#xff0c;但是同样是设置开启状态的单选框可以设置默认状态 原因&#xff1a;开始同样是和开启/关闭状态一样也把红框中列表的默认值设置为数字模式&#xff0c;但是由…...

编程日记 2023/8/3 11:40:31

git仓库清理

关于git仓库的清理&#xff0c;主要就是清理git仓库里面的大的二进制文件。网上查了很多教程&#xff0c;很多都是用&#xff1a;git filter-branch.清理仓库中的大文件。 我尝试着本地测试了一下&#xff0c;发现是真慢呀。 方法一、git filter-branch step1&#xff1a;查…...

编程日记 2023/8/3 11:39:29

从0到1开发go-tcp框架【3-读写协程分离、引入消息队列、进入连接管理器、引入连接属性】【基础篇完结】

从0到1开发go-tcp框架【3-读写协程分离、引入消息队列、进入连接管理器、引入连接属性】 1 读写协程分离[v0.7] 添加一个Reader和Writer之间通信的channel添加一个Writer goroutineReader由之前直接发送给客户端改为发送给通信channel启动Reader和Writer一起工作 zinx/znet/co…...

编程日记 2023/8/3 11:38:28

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…...

编程日记 2023/8/3 11:37:27

vue3+ts+pinia整合websocket

文章目录 一. 目标二. 前置环境三. websocket通用模板 一. 目标 先有实时数据需要展示. 由于设备量极大且要对设备参数实时记录展示.axios空轮询不太适合. 选择websocket长连接通讯. 使用pinia原因是pinia具备共享数据性质.可以作为消息队列缓存数据,降低渲染压力.同时方便多…...

编程日记 2023/8/3 11:35:24

【微信小程序】保存多张图片到本地相册

<template><view class"container"><u-swiper :list"list" circular radius0 indicator indicatorModedot height950rpx></u-swiper><view class"btn btn2" click"saveFun">保存到相册</view><…...

编程日记 2023/8/3 11:34:24

Python Numpy入门基础（二）数组操作

入门基础&#xff08;二&#xff09; NumPy是Python中一个重要的数学运算库&#xff0c;它提供了了一组多维数组对象和一组用于操作这些数组的函数。以下是一些NumPy的主要特点&#xff1a; 多维数组对象&#xff1a;NumPy的核心是ndarray对象&#xff0c;它是一个多维数组对…...

编程日记 2023/8/3 11:33:21

如何突破Cursor AI使用限制？解锁永久免费Pro功能的终极指南

如何突破Cursor AI使用限制&#xff1f;解锁永久免费Pro功能的终极指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached you…...

编程新知 2026/4/1 23:34:19

指挥OpenClaw抓取数据折腾了一夜，我终于想到了邪修玩法

这段时间玩小龙虾玩得真上头&#xff0c;突然想起之前一直想要统计公众号的数据。 这工作交给小龙虾妥妥能胜任啊&#xff01;但是吧……实际上执行出来的结果却不是这样的。 因为小白本地使用的是OpenClawAtomgit的方案&#xff0c;Atomgit主打一个不费一分钱&#xff0c;免…...

编程新知 2026/4/1 23:32:19

云容笔谈效果对比评测： vs Stable Diffusion 3.5东方人像生成质量深度分析

云容笔谈效果对比评测&#xff1a; vs Stable Diffusion 3.5东方人像生成质量深度分析 1. 评测背景与目的 东方人像生成一直是AI图像生成领域的特殊挑战。西方模型在生成东方人脸时常常出现面部结构不自然、表情僵硬、缺乏东方神韵等问题。本次评测将深入对比「云容笔谈」和S…...

编程新知 2026/4/1 22:55:39

Odoo 19成本核算避坑指南：标准成本法下差异分析、委外加工汇率风险与WIP分录丢失问题

Odoo 19成本核算实战避坑指南&#xff1a;标准成本差异、委外加工与WIP分录的深度解决方案 在制造业数字化转型浪潮中&#xff0c;Odoo 19作为开源ERP的领军者&#xff0c;其制造与会计模块的深度集成能力备受企业青睐。然而&#xff0c;当我们真正将系统投入生产环境时&#x…...

编程新知 2026/4/1 22:53:39

暗黑破坏神2存档修改实用教程：从入门到精通的d2s编辑器全攻略

暗黑破坏神2存档修改实用教程&#xff1a;从入门到精通的d2s编辑器全攻略 【免费下载链接】d2s-editor 项目地址: https://gitcode.com/gh_mirrors/d2/d2s-editor d2s-editor是一款专为《暗黑破坏神2》玩家打造的开源存档编辑工具&#xff0c;支持角色属性调整、物品管…...

编程新知 2026/4/1 21:04:08

CSS 容器查询：组件级响应式设计

CSS 容器查询&#xff1a;组件级响应式设计代码如诗&#xff0c;容器如画。让我们用容器查询的强大能力&#xff0c;创建真正自适应的组件。什么是容器查询&#xff1f; 容器查询&#xff08;Container Queries&#xff09;是 CSS 中一项革命性的特性&#xff0c;它允许我们根据…...

编程新知 2026/4/1 20:35:58

【测试之道】第四篇：分层测试论 —— 金字塔、奖杯与蜂巢：构建你的质量防御阵型

专栏进度&#xff1a;04 / 10 (测试理论专题) 在不同的架构&#xff08;单体、微服务、前端驱动&#xff09;下&#xff0c;测试资源的分配比例是完全不同的。盲目套用模板是测试经理最容易犯的错误。 一、 经典模型&#xff1a;测试金字塔 (Testing Pyramid) 由 Mike Cohn 提出…...

编程新知 2026/4/1 20:09:38

汽车电子选型：RF430F5144CIRKVRQ1为什么适合发动机舱附近的应用

RF430F5144CIRKVRQ1&#xff1a;这颗77mm的QFN芯片&#xff0c;如何把13.56MHz NFC和MSP430 MCU塞进一颗汽车级SoCRF430F5144CIRKVRQ1来自德州仪器&#xff0c;是一颗高度集成的NFC传感器收发器SoC。它的核心价值很直接&#xff1a;把13.56MHz HF射频前端、16位MSP430超低功耗M…...

编程新知 2026/4/1 19:29:10

Gemma-3-12B-IT大模型微调实战：领域适配指南

Gemma-3-12B-IT大模型微调实战&#xff1a;领域适配指南 1. 微调前的准备工作 微调大模型听起来很高深&#xff0c;其实就像教一个聪明人学习新技能。Gemma-3-12B-IT本身已经懂很多东西了&#xff0c;我们要做的就是让它更擅长某个特定领域。开始之前&#xff0c;你需要准备好…...

编程新知 2026/4/1 17:43:25

TP-Link Linux驱动开发面试全记录与实战技巧

1. TP-Link软件工程师面试全记录&#xff1a;Linux驱动开发方向作为一名在嵌入式Linux领域摸爬滚打多年的工程师&#xff0c;最近参加了TP-Link的软件工程师面试&#xff0c;岗位方向是Linux驱动开发。说实话&#xff0c;去之前我对TP-Link的认知还停留在"路由器方案商&qu…...

编程新知 2026/4/1 17:43:25