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

VSCode作业1:猜数字游戏和简单计数器(包含完整代码)

目录

猜数字游戏

一、使用‘random’函数获取随机数

二、 分情况讨论输入值大小情况

 三、HTML代码

 四、CSS样式及运行效果

 简单计数器(计时器)

一、使用‘setInterval’函数实现计数效果

二、使用’clearInterval‘函数实现暂停计数和重新计数效果 

三、HTML/CSS代码和运行效果


猜数字游戏

一、使用‘random’函数获取随机数

本题的关键在于利用‘random’函数获取随机数 ,但是‘random’方法获取的是[0,1)范围的随机数,这显然不太适合用来猜,所以我们一般把它乘以100,转换为整型,这样它的范围就是[0,100),这样就比较符合题意了,代码如下:

parseInt(Math.random(0,1)*100)

二、 分情况讨论输入值大小情况

这个题目的另一个关键点在于怎么才能使用户猜对数字,如果猜不对,那么这个游戏将没有意义,所以,对于用户的输入值,我们必须帮助用户进行判断大小,并进行提示,这样才是一个标准的写法,那判断的话,我们首先想到的就是if语句了,这题只需要考虑4种情况就行,代码示例如下:

 if (isNaN(num) || num < 1 || num > 100) {

                        this.result = "输入有误,请重新输入";

                        this.guess = "";

                    } else {

                        if (num === this.codekey) {

                            this.result = "恭喜你猜对了!!!";

                        }

                       。。。。。

                    }

 三、HTML代码

<body><div id="root"><h1>猜数字游戏</h1><div id="div_1"><input v-model="guess" type="text" @keyup.enter="doGuess"/></div><div id="div_2"><button @click="doGuess">提交</button></div><div id="div_3"><h1>{{result}}</h1></div></div><script>Vue.config.productionTip=false;const vm = new Vue({el: '#root',data: {guess: "",result: "请输入一个1-100的整数",codekey: parseInt(Math.random(0,1)*100)},methods: {doGuess() {var num = parseInt(this.guess);if (isNaN(num) || num < 1 || num > 100) {this.result = "输入有误,请重新输入";this.guess = "";} else {if (num === this.codekey) {this.result = "恭喜你猜对了!!!";}if(num > this.codekey){this.result = "猜大了,请猜小一点!!!"this.guess = "";}if(num < this.codekey){this.result = "猜小了,请猜大一点!!!"this.guess = "";}}}}})</script>
</body>

 四、CSS样式及运行效果

 下面我只是写了CSS样式简单示例,实际效果可以自行修改,不用拘于我所写的,写法有些重复,还有很大的优化空间,自行修改

<style>* {margin: 0;padding: 0;}#root {background-color: black;width: 600px;height: 400px;margin: 50px auto;color: white;}#div_1,#div_2,#div_3 {text-align: center;margin-top: 30px;}#div_3 {border: 2px solid white;width: 90%;height: 100px;margin: 30px auto;line-height: 90px;}input {width: 300px;height: 50px;font-size: 30px;}button {width: 100px;height: 50px;font-size: 30px;}</style>

 

 

 简单计数器(计时器)

一、使用‘setInterval’函数实现计数效果

要实现计数器,我们很容易联想到‘++’自增和for循环,如果在Java中我们能很简单的实现功能,但是VSCode中for的用法和Java中不一样,因此我们应该使用VSCode中的函数来 ‘setInterval’来实现功能。‘setInterval’函数可按照指定的周期(以毫秒计)来调用函数或计算表达式,意识就是你在‘setInterval’函数里面放个自增,设置时间为一秒,计数功能不就实现了嘛,示例代码如下:

time = setInterval(function () {

                        vm.counter++;

                    }, 100);

二、使用’clearInterval‘函数实现暂停计数和重新计数效果 

clearInterval () 方法将停止周期性执行的指定代码,对这些代码的操作是调用 setInterval () 方法 启动的。 

三、HTML/CSS代码和运行效果

CSS样式可以自己修改,这个样式较为简单,我就不分开写了,如下:

<head><meta charset="UTF-8"><script src="vue.js"></script><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}#root {width: 880px;height: 350px;margin: 10px auto;background-color: aqua;}</style>
</head><body><div id="root"><h1>{{counter}}</h1><button v-on:click="start">开始计数</button><button v-on:click="stop">停止计数</button><button v-on:click="reset">重新计数</button></div><script>var vm = new Vue({el: "#root",data: {counter: 0,},methods: {start() {time = setInterval(function () {vm.counter++;}, 100);},stop() {clearInterval(time);},reset() {clearInterval(time);this.counter = 0;}}})</script>
</body>

 

 

 以上就是两个案例啦,如果对你有帮助的话,希望可以点点赞哈,谢谢啦

 

相关文章:

VSCode作业1:猜数字游戏和简单计数器(包含完整代码)

目录 猜数字游戏 一、使用‘random’函数获取随机数 二、 分情况讨论输入值大小情况 三、HTML代码 四、CSS样式及运行效果 简单计数器&#xff08;计时器&#xff09; 一、使用‘setInterval’函数实现计数效果 二、使用’clearInterval‘函数实现暂停计数和重新计数效果 …...

NANK OE骨传导开放式蓝牙耳机发布,极致体验拉满!

近日&#xff0c;中国专业音频品牌NANK南卡发布了全新一代——骨传导开放式蓝牙耳机NANK OE&#xff0c;耳机采用了传统真无线和骨传导的结合方式&#xff0c;带来更加舒适的佩戴体验和音质升级&#xff0c;同时还支持单双耳自由切换&#xff0c;全新的设计收获了市场的喜爱和认…...

看完这篇文章你就彻底懂啦{保姆级讲解}-----(I.MX6U驱动GPIO中断《包括时钟讲解》) 2023.5.9

目录 前言整体文件结构源码分析&#xff08;保姆级讲解&#xff09;中断初始化部分初始化GIC控制器初始化中断向量表设置中断向量表偏移 系统时钟初始化部分使能所有的时钟部分led初始化部分beep初始化部分key初始化部分按键中断初始化部分按键中断服务函数部分 while循环部分 …...

MySql -- 事务

目录 1.概念 2.事务的运用场景 3.事务的四大特点 4.执行事务带来的问题 4.1 脏读 4.2 不可重复度 4.3 幻读 5. MySQL中事务的隔离级别 1.概念 事务就是把若干个独立操作打包成一个整体而诞生的一种功能. 2.事务的运用场景 比如&#xff1a;A——>B 转账500 A的余额-500…...

关于大模型对未来影响的一点看法

人们总是高估了未来一到两年的变化&#xff0c;低估了未来十年的变革。 ---比尔盖茨 近来OpenAI的GPT技术可以说在全球都带来了巨大的影响&#xff0c;也让大家看到了什么叫大力出奇迹。chatGPT和GPT4的能力给了大家很大的震撼&#xff0c;其流畅自如、逻辑清晰、出众的能力&am…...

Android - 约束布局 ConstraintLayout

一、概念 解决布局嵌套过多的问题&#xff0c;采用方向约束的方式对控件进行定位。 二、位置约束 2.1 位置 至少要保证水平和垂直方向都至少有一个约束才能确定控件的位置。 layout_constraintLeft_toLeftOf我的左边&#xff0c;与XXX左边对齐。layout_constraintLeft_toRight…...

Addictive Multiplicative in NN

特征交叉是特征工程中的重要环节&#xff0c;在以表格型&#xff08;或结构化&#xff09;数据为输入的建模中起到了很关键的作用。 特征交互的作用&#xff0c;一是尽可能挖掘对目标有效的模式、特征&#xff0c;二是具有较好的可解释性&#xff0c;三是能够将对数据的洞见引…...

LeetCode 1206. 实现跳表

不使用任何库函数&#xff0c;设计一个跳表。 跳表是在 O(log(n)) 时间内完成增加、删除、搜索操作的数据结构。跳表相比于树堆与红黑树&#xff0c;其功能与性能相当&#xff0c;并且跳表的代码长度相较下更短&#xff0c;其设计思想与链表相似。 例如&#xff0c;一个跳表包…...

离散数学_九章:关系(2)

9.2 n元关系及其应用 1、n元关系&#xff0c;关系的域&#xff0c;关系的阶2、数据库和关系 1. 数据库 2. 主键 3. 复合主键 3、n元关系的运算 1. 选择运算 (Select) 2. 投影运算 (Project) 3. 连接运算 (Join) n元关系&#xff1a;两个以上集合的元素间的关系 1、n元关系…...

[ubuntu][原创]通过apt方式去安装libnccl库

ubuntu18.04版本安装流程&#xff1a; wget https://developer.download.nvidia.com/compute/cuda/repos/ubuntu1804/x86_64/cuda-ubuntu1804.pin sudo mv cuda-ubuntu1804.pin /etc/apt/preferences.d/cuda-repository-pin-600 sudo apt-key adv --fetch-keys https://develo…...

YonLinker连接集成平台构建新一代产业互联根基

近日&#xff0c;由用友公司主办的“2023用友BIP技术大会“在用友产业园&#xff08;北京&#xff09;盛大召开&#xff0c;用友介绍了更懂企业业务的用友BIP-iuap平台&#xff0c;并发布了全面数智化能力体系&#xff0c;助力企业升级数智化底座&#xff0c;加强加速数智化推进…...

泛型的详解

泛型的理解和好处 首先我们先来看看泛型的好处 1)编译时&#xff0c;检查添加元素的类型&#xff0c;提高了安全性 2)减少了类型转换的次数&#xff0c;提高效率[说明] 不使用泛型 Dog -> Object -> Dog//放入到ArrayList 会先转成Object&#xff0c;在取出时&#x…...

用科技创造未来!流辰信息技术助您实现高效办公

随着社会的迅猛发展&#xff0c;科技的力量无处不见。它正在悄悄地改变整个社会&#xff0c;让人类变得进步和文明&#xff0c;让生活变得便捷和高效。在办公自动化强劲发展的今天&#xff0c;流辰信息技术让通信业、电网、汽车、物流等领域的企业实现了高效办公&#xff0c;数…...

基于R语言APSIM模型

随着数字农业和智慧农业的发展&#xff0c;基于过程的农业生产系统模型在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农田固碳和温室气体排放等领域扮演着越来越重要的作用。 APSIM (Agricultural Production Systems sIMulator)模型是世界知名的作物…...

块状链表实现BigString大字符串操作(golang)

前言 块状链表是介于链表和数组之间的数据结构&#xff0c;能够在 O ( n ) O(\sqrt{n}) O(n ​)时间内完成插入、删除、访问操作。 数据结构如图所示。假设最大容量为 n n n, 则它有一个长度为 s n s\sqrt{n} sn ​的链表。链表中每个结点是一个长度为 2 n 2 \times \sqrt{…...

项目问题记录(持续更新)

1.在 yarn install的时候报 error achrinza/node-ipc9.2.2: The engine "node" is incompatible with this module. Expected version "8 || 10 || 12 || 14 || 16 || 17". Got "20.1.0" error Found incompatible module.需要执行 yarn config…...

Linux的进程

目录 一、进程占用的内存资源 二、进程的系统环境 三、进程一直在切换 四、父进程和子进程 五、进程状态 六、查看进程 1.ps -ef 列出所有进程 2.ps -lax 列出所有进程 3.ps aux列出所有进程 4.树形列出所有进程 七、作业&#xff08;用来查看管理进程&#xff09; …...

与其焦虑被 AI 取代或猜测前端是否已死, 不如看看 vertical-align 扎实你的基础!!!

与其焦虑被 AI 取代或猜测前端是否已死, 不如看看 vertical-align 扎实你的基础!!! vertical-align 设置 display 值为 inline, inline-block 和 table-cell 的元素竖直对齐方式. 从 line-height: normal 究竟是多高说起 我们先来看一段代码, 分析一下为什么第二行的行高, 也就…...

路由、交换机、集线器、DNS服务器、广域网/局域网、端口、MTU

前言&#xff1a;网络名词术语解析(自行阅读扫盲)&#xff0c;推荐大家去读户根勤的《网络是怎样连接的》 路由(route)&#xff1a; 数据包从源地址到目的地址所经过的路径&#xff0c;由一系列路由节点组成。某个路由节点为数据包选择投递方向的选路过程。 路由器工作原理 路…...

在全志V851S开发板上进行屏幕触摸适配

1.修改屏幕驱动 从ft6236 &#xff08;删掉&#xff0c;不要保留&#xff09;&#xff0c;改为下面的 路径&#xff1a;/home/wells/tina-v853-open/tina-v853-open/device/config/chips/v851s/configs/lizard/board.dts&#xff08;注意路径&#xff0c;要设置为自己的实际路…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...