当前位置: 首页 > 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;要设置为自己的实际路…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...

基于stm32F10x 系列微控制器的智能电子琴(附完整项目源码、详细接线及讲解视频)

注&#xff1a;文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件&#xff1a;STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...

【Qt】控件 QWidget

控件 QWidget 一. 控件概述二. QWidget 的核心属性可用状态&#xff1a;enabled几何&#xff1a;geometrywindows frame 窗口框架的影响 窗口标题&#xff1a;windowTitle窗口图标&#xff1a;windowIconqrc 机制 窗口不透明度&#xff1a;windowOpacity光标&#xff1a;cursor…...