前端 : 用html ,css,js写一个你画我猜的游戏
1.HTML:
<body><div id = "content"><div id = "box1">计时器</div><div id="box"><div id= "top"><div id = "box-top-left">第几题:</div><div id = "box-top-right">得分:</div></div><div id = "center"><div id = "youxi">你画我猜</div><div id="timu">1234</div><div id="btn-start">开始游戏</div></div><div id = "bottom"><div id = "right">对</div><div id = "wrong">错</div></div></div></div></body>
2.CSS:
<style type="text/css">*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}#content{width:100%;height:100%;/* background-color: blue; */min-width: 1040px;min-height: 800px;position: relative;}#box1{width: 30%;height: 100%;position: relative;font-size: 50px;color: red;text-align: center;}#box{width:80%;height: 100%;/* background-color: aqua; */position: absolute;top: 0;right: 0;}#top{width: 80%;height: 60px;/* background-color: black; */position: relative;top: 20px;right: -150px;}#box-top-left{font-size: 40px;font-weight: 600;font-family: 楷体;margin-left: 50px;margin-top: 30px;color: gray;display: inline-block;}#box-top-right{font-size: 40px;font-weight: 600;font-family: 楷体;display: inline-block;margin-left: 600px;margin-top: 30px;color: gray;}#center{width: 80%;height: 400px;/* background-color: red; */position: relative;top: 100px;right: -150px;}#youxi{width: 100%;height: 100px;text-align: center;margin: 0 auto;font-weight: 700;font-family: 宋体;font-size: 70px;position: absolute;top: 100px;}#btn-start{width: 50%;height: 40px;text-align: center;color: crimson;margin: 0 auto;font-size: 30px;position: absolute;top: 300px;right: 250px;background-color: white;font-weight: 600;}#bottom{width:80% ;height: 100px;/* background-color: aqua; */position: relative;top: 200px;right: -150px;}#right{width:30% ;height: 40px;position: absolute;top:10%;left: 100px;font-size: 50px;}#wrong{position: absolute;right:100px;top: 10%;font-size: 50px;}</style>
3.JS代码:
<script type="text/javascript">var nums =0;var scores = 1;var yes = document.getElementById("right");var no = document.getElementById("wrong");var btnstart = document.getElementById("btn-start");var bod = document.getElementById("timu");var boxl = document.getElementById("box-top-left");var boxr = document.getElementById("box-top-right");var boxt = document.getElementById("box1");var str01 = ["伊泽瑞尔","放逐之刃","无双剑姬","暗黑元首","逆羽","幻翎","暗裔剑魔","锤石","泰坦","德玛西亚之力","德玛西亚皇子","青钢影","诺克萨斯之手","艾瑞利亚"];btnstart.onclick=function(){nums =0;scores = 1;suiji();var num = 180;var id = setInterval(function(){num--;if(num<0){clearInterval(id);}else{boxt.innerHTML = num;}},1000);}function suiji(){var num = Math.floor(Math.random()*14);bod.innerHTML = str01[num];}yes.onclick = function(){suiji();nums++;scores++;boxl.innerHTML = "第" + nums + "题";boxr.innerHTML = "得分:"+ scores;}no.onclick = function(){suiji();nums++;boxl.innerHTML = "第" + nums + "题";}</script>
效果展示:


相关文章:
前端 : 用html ,css,js写一个你画我猜的游戏
1.HTML: <body><div id "content"><div id "box1">计时器</div><div id"box"><div id "top"><div id "box-top-left">第几题:</div><div id "box…...
Illustrator 2024(AI v28.0)
Illustrator 2024是一款功能强大的矢量图形编辑软件,由Adobe公司开发。它是设计师、艺术家和创意专业人士的首选工具,用于创建和编辑各种矢量图形、插图、图标、标志和艺术作品。 以下是Adobe Illustrator的主要功能和特点: 矢量图形编辑&…...
【Git企业开发】第二节.Git 的分支管理
作者简介:大家好,我是未央; 博客首页:未央.303 系列专栏:Git企业级开发 每日一句:人的一生,可以有所作为的时机只有一次,那就是现在!!!࿰…...
第三章认识Node.js模块化开发
目录 认识Node.js 概述 作用 基本使用 Node.js的运行 Node.js的组成 Node.js的语法 Node.js全局对象 认识模块化开发 概述 场景 特点 模块成员的导入和导出 Node.js 模块化语法 导入模块 导出模块 ES6 模块化语法 导入模块 导出模块 项目 认识Node.js 概述…...
扩展Nginx的无限可能:掌握常见扩展模块和第三方插件的使用方法
Nginx是一款高性能的开源Web服务器和反向代理服务器。它具有模块化的架构,可以通过扩展模块和插件来增强其功能。在本文中,我将围绕Nginx的扩展模块和插件进行讲解,并提供一些常见的扩展模块和第三方插件的示例。 一、Nginx扩展模块 Nginx的…...
centos遇到的问题
lsof -i :8091 > 查看这个端口的线程 lsof : list open files 列出打开文件 -i : internet linux检测系统进程和服务: top : 实时监视系统的进程和资源的利用情况htop : top的增强版 问题: -bash: …...
本机spark 通idea连接Oracle的坑
1. 报错:Exception in thread "main" java.lang.NoSuchMethodError: scala.Product.$init$(Lscala/Product;)V 查询网上资料,是idea引入的scala运行环境版本与idea默认的scala版本不一样 也就是写的项目中的pom的spark版本与idea默认的版本不…...
网络协议--DNS:域名系统
14.1 引言 域名系统(DNS)是一种用于TCP/IP应用程序的分布式数据库,它提供主机名字和IP地址之间的转换及有关电子邮件的选路信息。这里提到的分布式是指在Internet上的单个站点不能拥有所有的信息。每个站点(如大学中的系、校园、…...
计算机视觉注意力机制小盘一波 (学习笔记)
将注意力的阶段大改分成了4个阶段 1.将深度神经网络与注意力机制相结合,代表性方法为RAM ⒉.明确预测判别性输入特征,代表性方法为STN 3.隐性且自适应地预测潜在的关键特征,代表方法为SENet 4.自注意力机制 通道注意力 在深度神经网络中…...
LVS+keepalive高可用集群
keepalive简介 keepalive为LVS应用延伸的高可用服务。lvs的调度器无法做高可用。但keepalive不是为lvs专门集群服务的,也可以为其他的的代理服务器做高可用。 keepalive在lvs的高可用集群,主调度器和备调度器(可以有多个) 一主两备或一主一备。 VRRP: k…...
Thread 和 Runnable 的区别
Thread 和 Runnable 接口的区别有四个: Thread 是一个类,Runnable 是接口,因为在 Java 语言里面的继承特性,接口可以支持多继承,而类只能单一继承。所以如果在已经存在继承关系的类里面要实现线程的话,只能…...
图神经网络和分子表征:5. Completeness
大家都知道 “两点确定一线,三点确定一平面”,那么多少个变量可以确定一个分子呢?这是最近顶刊们热烈讨论的话题。 (据笔者不完全统计)最早在 SphereNet (2022 ICLR)论文里,摘要上就…...
css-渐变色矩形
效果图: 代码: html: <!DOCTYPE html> <html><head><meta charset"utf-8"><meta name"viewport" content"initial-scale1.0, user-scalableno" /><title></title><link …...
使用easypoi-spring-boot-starter 4.1.1导入excel报错NoSuchMethodError和NoSuchMethodError
前言 使用easypoi进行excel的导入遇到的错误以及解决办法 easypoi项目地址:https://gitee.com/lemur/easypoi easypoi的Maven依赖: <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter<…...
matlab中类的分别之handle类和value类——matlab无法修改类属性值的可能原因
写在之前(吐槽) 最近由于变化了一些工作方向,开始需要使用matlab进行开发,哎哟喂,matlab使用的我想吐,那个matlab编辑器又没代码提示,又没彩色,我只好用vscode进行代码编辑…...
3. t2t_vit inference
前言 对vit 进行fp16推理 参考链接: https://github.com/open-mmlab/mmpretrain/tree/master/configs/t2t_vit run code : https://mmclassification.readthedocs.io/en/latest/getting_started.html#inference-and-test-a-dataset https://mmclassification.readthedo…...
SpringMVC Day 05 : Spring 中的 Model
前言 欢迎来到 SpringMVC 系列教程的第五天!在之前的教程中,我们已经学习了如何使用控制器处理请求和返回视图。今天,我们将深入探讨 Spring 中的 Model。 在 Web 应用程序开发中,数据的传递和展示是非常重要的。SpringMVC 提供…...
redis6.0源码分析:字典扩容与渐进式rehash
文章目录 字典数据结构结构设计dictType字典类型为什么字典有两个哈希表?哈希算法 扩容机制扩容前置知识字典存在几种状态?容量相关的关键字段定义字典的容量都是2的幂次方 扩容机制字典什么时候会扩容?扩容的阈值 & 扩容的倍数哪些方法会…...
【C++迭代器iterator】
迭代器 i t e r a t o r 迭代器iterator 迭代器iterator 在 容器 v e c t o r 容器vector 容器vector 中的使用 迭代器 i t e r a t o r 迭代器iterator 迭代器iterator 一般使用在 容器 v e c t o r 容器vector 容器vector 的 遍历 遍历 遍历,充当 遍历指针 遍…...
基于群居蜘蛛算法的无人机航迹规划
基于群居蜘蛛算法的无人机航迹规划 文章目录 基于群居蜘蛛算法的无人机航迹规划1.群居蜘蛛搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要:本文主要介绍利用群居蜘蛛算法来优化无人机航迹规划。 …...
GitHub Copilot X:从代码补全到全流程AI协作者的实战指南
1. 项目概述:当代码编辑器遇见“副驾驶”如果你和我一样,每天有超过一半的时间是在代码编辑器里度过的,那你一定对“效率”这个词有着近乎偏执的追求。从语法高亮、代码补全,到后来的LSP(Language Server Protocol&…...
用高效证书管理加固企业数字边界
在当今企业 IT 基础架构的运行中,数字证书已经成为不可或缺的重要组成部分。这在很大程度上源于企业逐渐将 HTTPS 作为默认的数据传输方式,以实现更加安全的通信环境。从安全与隐私角度来看,这无疑是一项积极的改变,因为数据在传输…...
OpenAI 与 Anthropic 财务大比拼:一家亏损求上市,一家盈利逆袭在望!
57亿 vs 48亿5月中旬,两家AI巨头同时亮出底牌,OpenAI秘密提交IPO申请,Anthropic拿出首个盈利季度财务预测。OpenAI第一季度营收57亿美元,每赚1美元亏1.22美元;Anthropic同期营收48亿美元,落后近10亿&#x…...
AI Agent 架构设计与实现原理深度解析
AI Agent 架构设计与实现原理深度解析 摘要 本文深入解析 AI Agent 的核心架构设计、关键组件原理及主流实现模式。从 ReAct 推理循环到记忆系统设计,从工具调用机制到生产级部署考量,全面剖析构建可靠智能体的技术要点。读者将掌握 AI Agent 的底层原…...
C++继承与组合设计
C继承与组合设计继承和组合是面向对象设计中两种重要的代码复用机制。继承表示"是一个"关系,而组合表示"有一个"关系。理解何时使用继承、何时使用组合是设计良好系统的关键。继承允许派生类继承基类的属性和方法,实现代码复用和多态…...
加印了!谢谢大家,这本不讲空话的“AI落地说明书”为什么能卖爆?
想不到有一天我也会有“书竟然卖爆了”的感觉,机械工业出版社要紧急加印才能供上货的那种。特别感谢机械工业出版社的朋友们从策划到发布的全程细致高效的工作,感谢微软中国首席技术官韦青老师亲临发布会现场为我们共同的理想发声,更要感谢各…...
【顶级EI复现】基于去噪概率扩散模型(DDPM)的电动汽车充电行为场景生成研究( Python + PyTorch实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 🎁…...
曝GPT-5.5用上“全球最快芯片”,Claude慌了
120B模型飙到2000 token/秒,CFO更放话已在跑GPT-5.5!Cerebras 560亿美元IPO首日暴涨68%,但SemiAnalysis万字拆解直指死穴。 SemiAnalysis,硅谷最硬核的芯片分析机构,4月份光是AI工具的订阅费就烧到了年化1000万美元。…...
Firefox渗透测试插件工作流:15款高价值安全工具实战指南
1. 这不是普通浏览器插件推荐,而是一套可落地的渗透测试辅助工作流 “火狐插件”四个字在安全从业者耳中,常被默认为“轻量级、临时性、辅助性”的代名词——很多人装完Hackbar就以为自己有了渗透入口,点开FoxyProxy调个代理就当完成了环境隔…...
MASA模组汉化包技术解析:构建高效中文游戏体验的技术解决方案
MASA模组汉化包技术解析:构建高效中文游戏体验的技术解决方案 【免费下载链接】masa-mods-chinese 一个masa mods的汉化资源包 项目地址: https://gitcode.com/gh_mirrors/ma/masa-mods-chinese 在Minecraft模组生态系统中,MASA系列模组以其强大的…...
