【html】用html5+css3+JavaScript制作一个计数器

目录

简介:

效果图:

源码:

        html:

        CSS:

        JS:

源码解析:


简介:

         在日常生活当中很多事情都需要用到计数器特别是在体育运动当中,可以我们那么我们可不可以通过网页来制作一个计数器呢答案是肯定的我们需要利用到css和javascript,特别是javascript,非常重要,因为它提供的是功能。我们废话不多说,直接上源码。

效果图:

源码:

        html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计数器</title><link rel="stylesheet" href="./css/styles.css">
</head>
<body><div class="counter"><p id="count">0</p><button id="increment">点击增加</button><button id="reset">重置</button> <!-- 新增的重置按钮 --></div><script src="./js/script.js"></script>
</body>
</html>

        CSS:

body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #e0e0e0;
}.counter {text-align: center;color: blue;font-size: 3em;border: 2px solid #000;padding: 18px 30px;border-radius: 19px;
}#count {font-size: 2em;margin-bottom: 10px;
}#increment {padding: 10px 20px;font-size: 1em;cursor: pointer;
}#reset {padding: 10px 20px;font-size: 1em;cursor: pointer;margin-top: 10px; /* 为了与增加按钮之间有些间距 */
}#increment,
#reset{background-color: aqua;border-radius: 19px;font-weight: 800;font-size: 30px;color: deeppink;width: 12.5rem;height: 100px;
}

        JS:

document.addEventListener('DOMContentLoaded', function() {var countElement = document.getElementById('count');var incrementButton = document.getElementById('increment');var count = 0;incrementButton.addEventListener('click', function() {count++;countElement.textContent = count;});
});document.addEventListener('DOMContentLoaded', function() {var countElement = document.getElementById('count');var incrementButton = document.getElementById('increment');var resetButton = document.getElementById('reset'); // 获取重置按钮var count = 0;incrementButton.addEventListener('click', function() {count++;countElement.textContent = count;});resetButton.addEventListener('click', function() {count = 0; // 重置计数器countElement.textContent = count; // 更新显示的数值});
});

源码解析:

  • styles.css 定义了页面的样式,包括计数器文本的字体大小、按钮的样式等。
  • script.js 包含了JavaScript代码,它监听DOMContentLoaded事件以确保在DOM完全加载后再执行脚本。然后,它获取计数元素和增加按钮,并设置一个初始计数为0。最后,它给增加按钮添加一个点击事件监听器,每次点击时,计数就会加一,并更新计数元素的文本内容。
  • index.html 是页面的HTML结构,它包括一个显示计数的<p>元素和一个增加按钮<button>。它还链接到CSS和JavaScript文件。

将这三个文件放在同一个文件夹中,并在浏览器中打开index.html文件,你应该就能看到一个简单的计数器,每次点击按钮时,计数就会加一。

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

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

相关文章

WPF Prism框架搭建

WPF Prism框架搭建 1.引入Prism框架 在Nuget包管理器中搜索Prism&#xff0c;并添加到项目中 2.在项目中使用prism框架 2.1 修改app.xaml 删除项目中自带的StartupUri 修改Application节点为prism:PrismApplication 引入prism命名空间 <prism:PrismApplication x:C…

Java工具-实现无损png转换jpg格式

目录 1、背景说明 2、通过代码实现格式转换 3、无损转化 4、说明 读取 PNG 图像&#xff1a; 创建空的 JPG 图像&#xff1a; 绘制 PNG 图像到 JPG 图像&#xff1a; 设置 JPG 图片压缩质量&#xff1a; 写入 JPG 文件并关闭流&#xff1a; 5、jpg转png 1、背景说明 …

最新开源:英伟达Nemotron-4 340B,哔哩哔哩Index-1.9B,谷歌RecurrentGemma-9B...

文章目录 1. 英伟达开源Nemotron-4 340B2. 哔哩哔哩开源轻量级模型 Index-1.9B3. 微软开源混合模型 Samba4. 谷歌开源 RecurrentGemma-9B&#xff0c;性能与Gemma相同5. Stable Diffusion 3 Medium&#xff1a;“最强文生图开源 AI 模型” 1. 英伟达开源Nemotron-4 340B 当地时…

C++初学者指南第一步---6.枚举和枚举类

C初学者指南第一步—6.枚举和枚举类 文章目录 C初学者指南第一步---6.枚举和枚举类1.作用域的枚举(enum class类型&#xff09;&#xff08;C11&#xff09;2.无作用域的枚举(enum类型)3.枚举类的基础类型4.自定义枚举类映射5.和基础类型的互相转换 1.作用域的枚举(enum class类…

C++ std::forward()

在线调试网站&#xff1a; https://wandbox.org/ #include <iostream> #include <thread> #include <mutex> void func(int &&args) {std::cout << args << std::endl; }int main () {int a 10;func(20); …

idea 如何查看项目启动的端口号

方式一&#xff1a;查看Run/Debug Configurations: 打开IntelliJ IDEA&#xff0c;点击菜单栏的Run&#xff0c;然后选择Edit Configurations...&#xff0c;或者直接使用快捷键&#xff08;通常是Shift Alt F10然后选择Edit Configurations&#xff09;。 在打开的Run/Debug…

Python武器库开发-武器库篇之链接提取器(六十)

Python武器库开发-武器库篇之链接提取器&#xff08;六十&#xff09; 链接提取器介绍 链接提取器&#xff08;Link Extractor&#xff09;是一种用于从网页中提取链接的工具。它可以从网页的源代码中识别出所有的链接&#xff0c;并将这些链接提取出来。链接提取器可以用于各…

gitlab问题记录

You wont be able to pull or push project code via SSH until you add an SSH key to you 解决方案&#xff1a;https://blog.csdn.net/gufenchen/article/details/95663284

PHP框架详解-symfony框架

Symfony框架是一款面向PHP开发的开源框架&#xff0c;用于开发Web应用和RESTful API。它的目标是提高开发效率、可维护性和可扩展性。本文将详细介绍Symfony框架的核心概念、基本用法和高级特性。 第一部分&#xff1a;入门篇 简介&#xff1a;介绍Symfony框架的背景、特点和…

Python第二语言(十二、SQL入门和实战)

目录 1. Python中使用MySQL 1.1 pymysql第三方库使用MySQL 1.2 连接MySQL 1.3 操作数据库&#xff0c;创建表 1.4 执行查询数据库语句 2. python中MySQL的插入语句 2.1 commit提交 2.2 自动提交 3. pymysql案例 3.1 数据内容 3.2 DDL定义 3.3 实现步骤 3.4 文件操…

赶紧收藏!2024 年最常见 20道设计模式面试题(四)

上一篇地址&#xff1a;赶紧收藏&#xff01;2024 年最常见 20道设计模式面试题&#xff08;三&#xff09;-CSDN博客 七、结构型模式&#xff1a;请解释适配器模式和装饰器模式的区别。 适配器模式&#xff08;Adapter Pattern&#xff09;和装饰器模式&#xff08;Decorato…

用python克隆了前男友的声音

声音克隆开源项目推荐&#xff1a;MockingBird 项目简介 MockingBird 是一个由开源社区开发的声音克隆项目&#xff0c;托管在 GitHub 上。该项目旨在通过深度学习技术实现高质量的声音克隆&#xff0c;使用户能够合成任意人的声音&#xff0c;并生成自然、流畅的语音输出。M…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 单词大师(100分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f…

多版本GCC安装及切换

目录 1 背景2 安装3 配置4 切换4.1 切换到版本94.2 切换到版本10 1 背景 最近在研究C20中的协程需要安装GCC版本10。用到GCC多版本切换&#xff0c;记录步骤。 2 安装 运行如下命令安装两个版本编译器: sudo apt install gcc-9 g-9 sudo apt install gcc-10 g-103 配置 使…

010-基于Sklearn的机器学习入门:聚类(上)

本节及后续章节将介绍深度学习中的几种聚类算法&#xff0c;所选方法都在Sklearn库中聚类模块有具体实现。本节为上篇&#xff0c;将介绍几种相对基础的聚类算法&#xff0c;包括K-均值算法和均值漂移算法。 目录 10.1 聚类概述 10.1.1 聚类的种类 10.1.2 Sklearn聚类子模…

shell脚本使用

判断程序有没有运行 &#xff0c;没有则启动程序 #!/bin/sh# 替换为你要检查的程序名称 program_name"xxx"# 使用pgrep命令查找程序的进程ID pid$(pgrep -f "$program_name")# 如果没有找到进程ID&#xff0c;说明程序没有运行&#xff0c;启动程序 if [ …

搭建zookeeper、Kafka集群

搭建zookeeper、Kafka集群 1、绘制kafka的存储结构、副本机制2、搭建zookeeper集群3、搭建kafka集群4、使用kafka创建名为自己姓名汉语拼音的topic5、查看topic的分区和副本策略 1、绘制kafka的存储结构、副本机制 2、搭建zookeeper集群 实验环境准备&#xff1a; 3台服务器&…

封装一个工具类,拒绝重复代码!

一、介绍 为了简化开发过程并提高代码的可维护性&#xff0c;我们可以创建一个统一的工具类来处理这些需求。 在本文中&#xff0c;我将介绍如何使用SpringBoot创建一个返回多级菜单、多级评论、多级部门、多级分类的统一工具类。 介绍数据库字段设计 数据库设计 「主要是…

在C语言中,可以使用strtol函数来将字符串中的16进制数转换为10进制整数

在C语言中&#xff0c;可以使用strtol函数来将字符串中的16进制数转换为10进制整数&#xff0c;进而转换为MAC地址的字节表示。以下是一个将字符串形式的MAC地址转换为16进制表示的例子&#xff1a; #include <stdio.h> #include <stdlib.h> #include <string.…

npm install cnpm -g 报错4048

npm install cnpm -g 报错4048 设置淘宝镜像&#xff1a; 报错如下&#xff1a; 其他博主提供的方法都尝试了&#xff0c;比如管理员权限打开终端&#xff0c;删除.npmrc文件&#xff0c;清除缓存npm cache clean -f等都试了无效&#xff0c;最后怀疑是npm和cnpm版本不对应&…