【前端】代码案例

1.猜数字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜数字</title>
</head>
<body><button type="button" id="reset">重新开始一局游戏</button><br>请输入要猜的数字：<input type="text" id="number"><button type="button" id="button">猜</button><br>已经猜的次数：<span id="count">0</span><br>结果：<span id="result"></span>
</body>
<script>let inputE = document.querySelector("#number");let countE = document.querySelector("#count");let resultE = document.querySelector("#result");let btn = document.querySelector("#button");let resetBtn = document.querySelector("#reset");// 随机生成一个 1-100 的数字，向下取整let guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数let count = 0;// 事件驱动（Event-Drive）：只要真正发生了点击事件时，才执行该函数btn.onclick = function() {count++;countE.innerText = count;let userGuess = parseInt(inputE.value);if (userGuess == guessNumber) {resultE.innerText = "猜对了";resultE.style = "color: green;";} else if (userGuess < guessNumber) {resultE.innerText = "猜小了";resultE.style = "color: blue;";} else {resultE.innerText = "猜大了";resultE.style = "color: red;";}};resetBtn.onclick = function() {guessNumber = Math.floor(Math.random() * 100) + 1count = 0;countE.innerText = count;resultE.innerText = "";inputE.value = "";}
</script>
</html>

 

2.表白墙

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title><style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;}   p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;border-radius: 5px;}.submit:active {background-color: gray;}</style>
</head>
<body><div class="container"><h1>表白墙</h1><p>输入后点击提交, 会将信息显示在表格中</p><div class="row"><span>谁: </span><input class="edit" type="text"></div><div class="row"><span>对谁: </span><input class="edit" type="text"></div><div class="row"><span>说什么: </span><input class="edit" type="text"></div><div class="row"><input type="button" value="提交" class="submit"></div></div>
</body>
<script>// 给点击按钮注册点击事件var submit = document.querySelector('.submit');submit.onclick = function () {// 1. 获取到编辑框内容var edits = document.querySelectorAll('.edit');var from = edits[0].value;var to = edits[1].value;var message = edits[2].value;console.log(from + "," + to + "," + message);if (from == '' || to == '' || message == '') {return;}// 2. 构造 html 元素var row = document.createElement('div');row.className = 'row';row.innerHTML = from + '对' + to + '说: ' + message;// 3. 把构造好的元素添加进去var container = document.querySelector('.container');container.appendChild(row);// 4. 同时清理之前输入框的内容for (var i = 0; i < 3; i++) {edits[i].value = '';}}
</script>
</html>

 

3.待办事项

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>待办事项</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 800px;margin: 0 auto;display: flex;}.todo, .done {width: 50%;height: 100%;}.container h3 {height: 50px;text-align: center;line-height: 50px;background-color: #333;color: #fff;}.nav {width: 800px;height: 100px;margin: 0 auto;display: flex;align-items: center;}.nav input {width: 600px;height: 50px;}.nav button {width: 200px;height: 50px;border: none;background-color: orange;color: #fff;}.nav button:active {background-color: gray;}.row {height: 50px;display: flex;align-items: center;}.row input {margin: 0 10px;}.row span {width: 300px;}.row button {width: 50px;height: 40px;}</style>
</head>
<body><div class="nav"><input type="text"><button>新建任务</button></div><div class="container"><div class="todo"><h3>未完成</h3><div class="row"><input type="checkbox"><span>吃饭</span><button>删除</button></div></div><div class="done"><h3>已完成</h3></div></div>
</body>
<script>let addTaskButton = document.querySelector('.nav button');addTaskButton.onclick = function () {// 1. 获取到任务内容的输入框let input = document.querySelector('.nav input');// 2. 获取到输入框内容let taskContent = input.value;// 3. 根据内容新建一个元素节点let row = document.createElement('div');row.className = 'row';let checkbox = document.createElement('input');checkbox.type = 'checkbox';let span = document.createElement('span');span.innerHTML = taskContent;let button = document.createElement('button');button.innerHTML = '删除';row.appendChild(checkbox);row.appendChild(span);row.appendChild(button);// 4. 把新节点插入到 todo 中let todo = document.querySelector('.todo');todo.appendChild(row);// 5. 给 checkbox 注册点击事件checkbox.onclick = function () {let row = this.parentNode;// 注意! 是先触发 checked 为 true, 然后再调用 onclick 函数if (this.checked) {let target = document.querySelector('.done');} else {let target = document.querySelector('.todo');}target.appendChild(row);}// 6. 给删除按钮注册点击事件button.onclick = function () {let row = this.parentNode;let grandParent = row.parentNode;grandParent.removeChild(row);}}
</script>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

idea运行项目没反应【debug和run灰色】

idea运行项目没反应【debug和run灰色】

解决方法 File->Settings->Plugins->groovy 将groovy勾选的√去掉&#xff0c;保存再重新启动idea即可。 啊啊啊码
阅读更多...
【微服务】认识Dubbo+基本环境搭建

【微服务】认识Dubbo+基本环境搭建

认识Dubbo Dubbo是阿里巴巴公司开源的一个高性能、轻量级的WEB和 RPC框架&#xff0c;可以和Spring框架无缝集成。Dubbo为构建企业级微服务提供了三大核心能力&#xff1a; 服务自动注册和发现、面向接口的 远程方法调用&#xff0c; 智能容错和负载均衡官网&#xff1a;https…
阅读更多...
RK3568平台 iperf3测试网络性能

RK3568平台 iperf3测试网络性能

一.iperf3简介 iperf是一款开源的网络性能测试工具&#xff0c;主要用于测量TCP和UDP带宽性能。它可以在不同的操作系统上运行&#xff0c;包括Windows、Linux、macOS等。iperf具有简单易用、功能强大、高度可配置等特点&#xff0c;广泛应用于网络性能测试、网络故障诊断和网…
阅读更多...
SpringBoot集成Solr全文检索

SpringBoot集成Solr全文检索

SrpingBoot 集成 Solr 实现全文检索 一、核心路线 使用 Docker 镜像部署 Solr 8.11.3 版本服务使用 ik 分词器用于处理中文分词使用 spring-boot-starter-data-solr 实现增删改查配置用户名密码认证使用 poi 和 pdfbox 组件进行文本内容读取文章最上方有源码和 ik 分词器资源…
阅读更多...
【晴问算法】入门篇—字符串处理—单词数

【晴问算法】入门篇—字符串处理—单词数

题目描述 给定一堆用空格隔开的英文单词&#xff0c;统计单词个数。输入描述 一堆英文单词&#xff0c;每个单词不超过10个字符&#xff0c;且仅由大小写字母组成;每两个单词之间用一个空格隔开&#xff0c;整个字符串的长度不超过1000。输出描述 输出一个整数&#xff0c;表示…
阅读更多...
视频汇聚平台EasyCVR启用图形验证码之后调用login接口的操作方法

视频汇聚平台EasyCVR启用图形验证码之后调用login接口的操作方法

视频综合管理平台EasyCVR视频监控系统支持多协议接入、兼容多类型设备&#xff0c;平台可以将区域内所有部署的监控设备进行统一接入与集中汇聚管理&#xff0c;实现对监控区域的实时高清视频监控、录像与存储、设备管理、云台控制、语音对讲、级联共享等&#xff0c;在监控中心…
阅读更多...
【网络爬虫】(2) requests模块，案例：网络图片爬取，附Python代码

【网络爬虫】(2) requests模块，案例：网络图片爬取，附Python代码

1. 基本原理 1.1 requests 模块 requests 是 Python 中一个非常流行的 HTTP 客户端库&#xff0c;用于发送所有的 HTTP 请求类型。它基于 urllib&#xff0c;但比 urllib 更易用。 中文文档地址&#xff1a;Requests: 让 HTTP 服务人类 — Requests 2.18.1 文档 &#xff0…
阅读更多...
OpenHarmony 源码解析之SystemUi—Statusbar（TS）

OpenHarmony 源码解析之SystemUi—Statusbar（TS）

作者&#xff1a;董伟 简介 SystemUI应用是OpenHarmony中预置的系统应用&#xff0c;为用户提供系统相关信息展示及交互界面&#xff0c;包括系统状态、系统提示、系统提醒等&#xff0c;例如系统时间、电量信息。 本文主要分析batterycomponent、clockcomponent、wificompo…
阅读更多...
[Windows常用软件] word 复制粘贴报错修复

[Windows常用软件] word 复制粘贴报错修复

背景 在word 内 ctrlv 会报这个错。 microsoft visual basic MathPage.Wll 运行时错误 网上查了一下是 mathtype 导致的&#xff0c;应该是我之前卸载 mathtype 没有卸载干净导致的。 解决方案 参考知乎里面的一个回答解决的&#xff1a;https://www.zhihu.com/question/37…
阅读更多...
高防服务器、高防IP、高防CDN的工作原理是什么

高防服务器、高防IP、高防CDN的工作原理是什么

高防IP高防CDN我们先科普一下是什么是高防。“高防”&#xff0c;顾名思义&#xff0c;就犹如网络上加了类似像盾牌一样很高的防御&#xff0c;主要是指IDC领域的IDC机房或者线路有防御DDOS能力。 高防服务器主要是比普通服务器多了防御服务&#xff0c;一般都是在机房出口架设…
阅读更多...
网络七层模型之网络层：理解网络通信的架构（三）

网络七层模型之网络层：理解网络通信的架构（三）

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
centos 7安装pgsql14

centos 7安装pgsql14

参考 yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm终端直接运行&#xff1a;yum install -y postgresql14-server 1. 初始化数据库 使用yum安装后&#xff0c;会在系统中创建一个postgres的无密码…
阅读更多...
【快速解决】谷歌浏览器驱动的安装及selenium的安装

【快速解决】谷歌浏览器驱动的安装及selenium的安装

目录 快速安装Selenium 快速下载对应谷歌驱动 找不到对应版本号的解决方法 快速安装Selenium 安装 Selenium 环境就用下面的代码进行安装&#x1f447;&#x1f447;&#x1f447;&#x1f447;&#x1f447; pip install selenium3.141.0 快速下载对应谷歌驱动 点击这个链接…
阅读更多...
关于RPC

关于RPC

初识RPC RPC VS REST HTTP Dubbo Dubbo 特性&#xff1a; 基于接口动态代理的远程方法调用 Dubbo对开发者屏蔽了底层的调用细节&#xff0c;在实际代码中调用远程服务就像调用一个本地接口类一样方便。这个功能和Fegin很类似&#xff0c;但是Dubbo用起来比Fegin还要简单很多&a…
阅读更多...
pe启动盘破解windows密码wins电脑登录密码修改重置

pe启动盘破解windows密码wins电脑登录密码修改重置

目录 1.进入电脑BIOS&#xff0c;设置电脑第一启动项为U盘启动2.进入微pe系统3.然后点击界面最左下方的Windows图标4.点击windows密码选择对应用户名称修改&#xff1b; 1.进入电脑BIOS&#xff0c;设置电脑第一启动项为U盘启动 把u盘插到要清除密码的电脑&#xff0c;然后开机…
阅读更多...
Java语法学习 正则表达式

Java语法学习 正则表达式

Java语法学习 正则表达式 大纲 具体案例 需求&#xff1a;使用正则表达式完成对文本的查询&#xff0c;regular expression&#xff08;正则表达式&#xff09; 源码解析group package com.wantian.regular;import java.util.regex.Matcher; import java.util.regex.Patt…
阅读更多...
日新增百万数据clickhouse大数据解决方案记录分享

日新增百万数据clickhouse大数据解决方案记录分享

公司广告业务需求&#xff0c;需要多个维度统计每个应用的设备数&#xff0c;点击率&#xff0c;展示率&#xff0c;等相关数据&#xff0c;而且数据需要进行去重&#xff0c;我第一时间想到的是利用clickhouse来做统计&#xff0c;因为我们平台访问量比较大&#xff0c;用mysq…
阅读更多...
浅谈WPF之MVVM工具包

浅谈WPF之MVVM工具包

在之前的WPF示例中&#xff0c;都会用到一个MVVM框&#xff0c;也是一个比较常的MVVM框架&#xff0c;就是MVVM工具包【CommunityToolkit.Mvvm】&#xff0c;今天专门以一个简单的小例子&#xff0c;简述一下MVVM工具包的常见用法&#xff0c;仅供学习分享使用&#xff0c;如有…
阅读更多...
选项式API和组合式API的区别

选项式API和组合式API的区别

选项式(options) API 和组合式(composition) API两种不同的风格书写&#xff0c;Vue3 的组件可以使用这两种api来编写。 选项式API和组合式API的区别 选项式API 选项式 API&#xff0c;具有相同功能的放在一起&#xff0c;可以用包含多个选项的对象来描述组件的逻辑&…
阅读更多...
WPF---1.入门学习

WPF---1.入门学习

学习来源 布局 wpf布局原则 一个窗口中只能包含一个元素 不应显示设置元素尺寸 不应使用坐标设置元素的位置 可以嵌套布局容器 StackPanel-->表单条件查找布局 DataGrid wpf布局容器 StackPanel: 水平或垂直排列元素&#xff0c;Orientation属性分别: Horizontal / Vertic…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023