长相思·罚站墙Vue

优化前

看效果图

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 += st
                this.result_time = this.fail_time - this.succeed_time
                if (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 += st
                this.result_time = this.fail_time - this.succeed_time
                if (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 += st
                this.result_time = this.fail_time - this.succeed_time
                if (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 += st
                this.result_time = this.fail_time - this.succeed_time
                if (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啥的，回头在复习一下，都忘记了

优化后

1.特意做了PK按钮，运用旋转，灵感来源用css制作三角形
2.使用v-for避免冗余
3.“罚站”和“坐下”的颜色可以改变
4.本地存储，下次打开还是有的

效果图

在这里插入图片描述

代码

<!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>
<link rel="stylesheet" href="../base.css">
<style>
    body {
        background-color: rgb(239, 237, 216);
    }

    .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;
        margin-bottom: 30px;
    }

    .body {
        display: flex;
        justify-content: space-around;
        /* background-color: aqua; */
    }


    img {
        width: 200px;
        height: 300px;

    }

    .punishment {
        color: red;
    }

    .reward {
        color: rgb(0, 208, 255);
    }

    h3 {
        text-align: center;
    }

    .text {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* PK的按钮 */
    .btn_box {
        position: relative;
        margin: 10px auto;
        width: 120px;
        height: 40px;
        /* border: 1px black solid; */
        /* background-color: #b17a7a; */
        border-radius: 30px;
        overflow: hidden;
        border-radius: 30px;


    }

    .right {
        position: absolute;
        top: -2px;
        width: 110%;
        height: 110%;
        background-color: #ffffff;
        text-align: right;
        line-height: 40px;
        padding-right: 30px;
        color: #e94e4e;
        font-weight: bold;
        border: none;
    }

    .left {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 150%;
        background-color: #e94e4e;
        transform-origin: 31% 25%;
        transform: rotate(57deg);
        color: aliceblue;
        font-weight: bold;
        border: none;
        overflow: hidden;
    }

    .btn_box span {
        /* background-color: blueviolet; */
        display: block;
        width: 27px;
        transform-origin: 80% -80%;
        transform: rotate(302deg);
    }
</style>

<body>
    <div id="app">
        <div class="box">
            <h1 class="title">长相思· 角色罚站墙</h1>

            <!-- 主体 -->
            <div class="body">
                <div v-for="(item,index) in list">
                    <img :src="item.srcUrl">
                    <h3>{{item.name}} </h3>
                    <span class="text"
                        :class="{punishment:item.result_status=='罚站',reward:item.result_status=='坐下'}">{{item.result_status}}:{{item.result_time}}min</span>

                    <div class="btn_box">

                        <button @click="punishment(item)" class="left">
                            <span>罚站</span>
                        </button>
                        <button @click="reward(item)" class="right">坐下</button>
                    </div>
                </div>

            </div>
        </div>

    </div>
</body>


<script>
    const defaultArr = [
        { srcUrl: './img/张晚意.jpg', name: '玱玹', result_status: '坐下', result_time: 0, p_time: 0, r_time: 0 },
        { srcUrl: './img/相柳.jpg', name: '相柳', result_status: '坐下', result_time: 0, p_time: 0, r_time: 0 },
        { srcUrl: './img/涂山璟.jpg', name: '涂山璟', result_status: '坐下', result_time: 0, p_time: 0, r_time: 0 },
        { srcUrl: './img/赤水丰隆.jpg', name: '赤水丰隆', result_status: '坐下', result_time: 0, p_time: 0, r_time: 0 },
    ];
    const app = new Vue({
        el: '#app',
        data: {
            list: JSON.parse(localStorage.getItem('list')) || defaultArr,

        },
        methods: {
            punishment(item) {
                console.log('punish');

                item.p_time++;
                item.result_time = item.p_time - item.r_time;
                if (item.result_time > 0) {
                    item.result_status = '罚站'
                }
                else {
                    item.result_time = -item.result_time;
                    item.result_status = '坐下'
                }
            },
            reward(item) {
                console.log('reward');
                item.r_time++;
                item.result_time = item.p_time - item.r_time;
                if (item.result_time <= 0) {
                    item.result_time = -item.result_time;
                    item.result_status = '坐下'
                }
                else {
                    item.result_status = '罚站'
                }
            }


        },
        computed: {

        },
        watch: {
            list: {
                deep: true,
                handler(newValue) {
                    localStorage.setItem('list', JSON.stringify(newValue))


                }
            }
        },

    })


</script>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/58773.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

windows环境下安装elasticsearch、kibana

windows环境下安装elasticsearch、kibana

通过本文可以快速在windows系统上安装elasticsearch、kibana环境。 当你用Integer类型的时候&#xff0c;要非常小心&#xff0c;因为100等于100、但是200不等于200&#xff0c;当然&#xff0c;如果你会一点小花招&#xff0c;也可以让100不等于100、让200等于200。(运算符比较…
阅读更多...
全球十大知名看黄金即时行情的软件名单（综合榜单）

全球十大知名看黄金即时行情的软件名单（综合榜单）

在当今的数字化时代&#xff0c;黄金投资已成为一种受欢迎的投资方式。为了获取即时的黄金行情信息&#xff0c;许多投资者开始使用黄金即时行情软件。然而&#xff0c;选择一款合适的软件并不是一件容易的事情。那么&#xff0c;如何选适合自己需求的软件呢&#xff1f;首先&a…
阅读更多...
LeetCode344.反转字符串

LeetCode344.反转字符串

344.反转字符串 题目描述 解题思路 这是字符串专题的第一题 在之前反转链表的题目中&#xff0c;我们使用了双指针法来进行反转链表 这道题同样的&#xff0c;也使用双指针&#xff0c;对于字符串的反转&#xff0c;比链表更为简单 因为字符串本质上是一种数组&#xff0c…
阅读更多...
【嵌入式学习笔记】嵌入式入门5——窗口看门狗WWDG

【嵌入式学习笔记】嵌入式入门5——窗口看门狗WWDG

1.WWDG简介 WWDG的全称&#xff1a;Window watchdog&#xff0c;即窗口看门狗WWDG的本质&#xff1a;能产生系统复位信号和提前唤醒中断的计数器WWDG的特性&#xff1a;递减的计数器&#xff0c;当递减计数器值从 0x40减到0x3F时复位&#xff08;即T6位跳变到0&#xff09;&am…
阅读更多...
性能优化-react路由懒加载和组件懒加载

性能优化-react路由懒加载和组件懒加载

背景 随着项目越来越大&#xff0c;打包后的包体积也越来越大&#xff0c;严重影响了首屏加载速度&#xff0c;需要对路由和组件做懒加载处理 主要用到了react中的lazy和Suspense。 废话不多说&#xff0c;直接上干货 路由懒加载 核心代码 import React, { lazy, Suspens…
阅读更多...
三款AI写作宝介绍，教你玩转AI写作

三款AI写作宝介绍，教你玩转AI写作

AI写作宝是一款利用人工智能技术自动生成文章的工具。它采用先进的自然语言处理算法&#xff0c;可以在短时间内生成高质量的文章。与传统的写作方式相比&#xff0c;AI写作宝有着更快的速度、更高的准确性和更低的成本&#xff0c;成为了许多人工智能爱好者和写作从业者的首选…
阅读更多...
写字楼门禁如何管理？最最新方法来了！

写字楼门禁如何管理？最最新方法来了！

在现代社会&#xff0c;随着城市化和商务发展的蓬勃推进&#xff0c;大厦写字楼作为繁忙的商业中心和办公场所&#xff0c;其安全管理和员工考勤变得尤为重要。为了应对这一挑战&#xff0c;人脸门禁考勤机应运而生&#xff0c;成为大厦写字楼的安全保障和工时管理的关键工具。…
阅读更多...
【数模】聚类模型

【数模】聚类模型

分类和聚类 分类&#xff1a;最终类别是确认的&#xff0c;把各样本分到已有的类别中聚类&#xff1a;最终类别是未知的&#xff0c;把所有样本划分出最终类别 一、K-means聚类算法 1.1 K-means算法了解 算法流程&#xff08;推荐使用流程图&#xff1a;更简洁&#xff0c;且…
阅读更多...
Mybatis引出的一系列问题-JDBC 的探究

Mybatis引出的一系列问题-JDBC 的探究

1 引入对JDBC的理解-1 一般来说&#xff0c;Java应用程序访问数据库的过程是&#xff1a; 装载数据库驱动程序&#xff1b;通过jdbc建立数据库连接&#xff1b;访问数据库&#xff0c;执行sql语句&#xff1b;断开数据库连接。 Public void FindAllUsers(){//1、装载sqlserve…
阅读更多...
synchronized总结

synchronized总结

目录 一、synchronized的特性 1.1 原子性 1.2 可见性 1.3 有序性 1.4 可重入性 二、synchronized的使用 2.1 修饰普通方法 2.2 修饰静态方法 2.3 修饰代码块 三、synchronized的锁机制 3.1 偏向锁 3.2 轻量级锁 3.3 重量级锁 一、synchronized的特性 1.1 原子性 原子性是指一…
阅读更多...
Eclipse进行debug

Eclipse进行debug

目录 基本步骤三种执行方式 -- 键盘快捷键variables面板移除debug过的项目通过eclipse调用具有软件界面的项目进行debug各个variable颜色具有的意义 基本步骤 点击eclipse右上角debug按钮 调出debug面板 点击小蜘蛛图标&#xff08;不是点绿色三角的Run&#xff09; 此时会进…
阅读更多...
华为流程体系：流程架构「OES方法」

华为流程体系：流程架构「OES方法」

目录 内容简介 OES方法 端到端的流程 专栏列表 CSDN学院 作者简介 内容简介 今天继续来谈谈华为流程体系中的流程架构。 在前期的内容已经介绍过 POS 流程架构的方法。 这里就先回顾一下 POS 方法的相关内容&#xff1a; 关于 POS&#xff0c;大家可以参看上面的这张图…
阅读更多...
实现天气预报走势图

实现天气预报走势图

实现效果&#xff1a; 这里我用的天气接口是网上开源的&#xff0c;可以自己找一下。 稍微简单封装了一下axiso以及接口 封装的axios&#xff1a; // import { useUserStore } from /stores/user import axios from axios import router from /router import { ElMessage } f…
阅读更多...
Nginx 高性能内存池 ----【学习笔记】

Nginx 高性能内存池 ----【学习笔记】

跟着这篇文章学习&#xff1a; c代码实现一个高性能内存池&#xff08;超详细版本&#xff09;_c 内存池库_linux大本营的博客-CSDN博客https://blog.csdn.net/qq_40989769/article/details/130874660以及这个视频学习&#xff1a; nginx的内存池_哔哩哔哩_bilibilihttps://w…
阅读更多...
go逆向符号恢复

go逆向符号恢复

前言 之前一直没怎么重视&#xff0c;结果发现每次遇到go的题都是一筹莫展&#xff0c;刷几道题练习一下吧 准备 go语言写的程序一般都被strip去掉符号了&#xff0c;而且ida没有相关的签名文件&#xff0c;没办法完成函数名的识别与字符串的定位&#xff0c;所以第一步通常…
阅读更多...
C语言经典小游戏之三子棋（超详解释＋源码）

C语言经典小游戏之三子棋（超详解释＋源码）

“纵有疾风来&#xff0c;人生不言弃&#xff0c;风乍起&#xff0c;合当奋意向此生。” 今天我们一起来学习一下三子棋小游戏用C语言怎么写出来&#xff1f; 三子棋小游戏 1.游戏规则介绍2.游戏准备3.游戏的实现3.1生成菜单3.2游戏的具体实现3.2.1初始化棋盘3.2.2打印棋盘3.2…
阅读更多...
TypeScript【enum 枚举】

TypeScript【enum 枚举】

导语 在 TypeScript 中&#xff0c;新增了很多具有特性的一些数据类型处理方法&#xff0c;enum 【枚举】就是其中&#xff0c;很具有代表性的一种&#xff0c;所以本章节就来聊聊 在 TypeScript 中如何去运用 enum 【枚举】。 枚举的概念&#xff1a; 枚举&#xff08;Enum&am…
阅读更多...
机器学习基础08-模型选择02-分类算法矩阵（基于Pima 数据集）

机器学习基础08-模型选择02-分类算法矩阵（基于Pima 数据集）

算法评估矩阵&#xff08;Algorithm Evaluation Metrics&#xff09;用于评估机器学习算法在特定任务上的性能。不同的任务可能会使用不同的评估矩阵&#xff0c;因为每个任务的优劣衡量标准都不同。 分类算法矩阵 分类问题或许是最常见的机器学习问题&#xff0c;并且有多种评…
阅读更多...
【算法心得】C++map用不着map.find(arr[j])!=map.end()；js的map是map不是哈希；编译器选GNU

【算法心得】C++map用不着map.find(arr[j])!=map.end()；js的map是map不是哈希；编译器选GNU

https://leetcode.com/problems/count-of-range-sum/ https://vjudge.csgrandeur.cn/problem/CodeForces-459D 这两题都是线段树&#xff0c;很明显的单点修改区间查询 leetcode那题我觉得map用hashmap就行&#xff0c;但是好像js里没有hashmap&#xff0c;那就 Map() 也行吧…
阅读更多...
vue、uniapp直传阿里云文档

vue、uniapp直传阿里云文档

前端实现文件上传到oss&#xff08;阿里云&#xff09;适用于vue、react、uni-app&#xff0c;获取视频第一帧图片 用户获取oss配置信息将文件上传到阿里云&#xff0c;保证了安全性和减轻服务器负担。一般文件资源很多直接上传到服务器会加重服务器负担此时可以选择上传到oss&…
阅读更多...
最新文章

Copyright @ 2022~2023