JS Lab

  • 如何用 JavaScript 在浏览器中弹窗
  • 如何在 JavaScript 中制作鼠标滑过按钮改变背景颜色
  • 如何在 JS 中点击按钮使数字增加
  • 如何在 JS 中循环打印多少次
HTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS Lab</title><link rel="stylesheet" href="css/style.css">
</head>
<body><button class="btn" onclick="alertBtn()">Alert Button</button><hr><button class="btn" id="hoverButton">Hover Button</button><hr><button class="btn" id="increaseButton">Incrementing Button</button><span id="number" class="even">0</span><hr><p class="p-loop">For Loops: Print "Hello!" 10 times</p><div id="container"></div>
</body>
<script async src="js/lab.js"></script>
</html>
CSS
body{font-family:Arial; font-size:16px;}
hr{border:1px dashed #ddd;}
.btn{padding:8px 20px; margin: 5px 0;border-radius: 100px;border:1px solid #aaa;}
.btn:hover{background:#fff;}
#hoverButton{background:green; color:#fff; border:0;}
#number{font-size: 20px; margin-left:15px;}
.p-loop{font-weight: bold;}
.odd {color: blue;}
.even {color: red;}
JavaScript
// Alert 
function alertBtn() {alert("Hello world!");
}// Hover Button
let hoverButton = document.getElementById('hoverButton');
hoverButton.onmouseover = function() {this.style.backgroundColor = 'orange'; 
};
hoverButton.onmouseout = function() {this.style.backgroundColor = ''; 
};// Incrementing Button
document.getElementById('increaseButton').addEventListener('click', function() {let numberElement = document.getElementById('number');let currentNumber = parseInt(numberElement.textContent, 10);currentNumber += 1; let newClass = currentNumber % 2 === 0 ? 'even' : 'odd';numberElement.textContent = currentNumber;numberElement.className = newClass;
});// For Loops
for (let i = 0; i < 10; i = i + 1) {document.getElementById('container').append('Hello! ');
}// Change Font Color
function changeFontColor() {let changeButton = document.getElementById("pColor"); let color = changeButton.style.color;if (color == "red") { changeButton.style.color = 'blue';} else {changeButton.style.color = 'red';}
}

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

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

相关文章

优化FPGA SelectIO接口VREF生成电路

引言&#xff1a;FPGA设计中使用了各种PCB SelectIO™接口VREF生成电路。有时即使在以前的设计中已经成功的在电路板上设计了VREF生成电路&#xff0c;也会在VREF引脚上发现大量噪声&#xff08;200–400mV&#xff09;。大量VREF噪声的存在可能导致高性能SelectIO接口&#xf…

瑞昱半导体AMB82 MINI(RTL8735B)Arduino 方法介绍

介绍瑞昱半导体&#xff08;Realtek &#xff09;AMB82-Mini 物联网 AI开发板 Ameba是一个易于编程的平台&#xff0c;用于开发各种物联网应用程序。AMB82 MINI配备了各种外设接口&#xff0c;包括WiFi、BLE、GPIO INT、I2C、UART、SPI、PWM、ADC。通过这些接口&#xff0c;AM…

找出只出现一次的数字

输入一些数字&#xff0c;每个数字以逗号分隔&#xff0c;其中有一个数字出现1次&#xff0c;其余数字均会出现2次。请找出那个只出现一次的数字! 提示&#xff1a;使用字典的方式实现 # 输入一些数字&#xff0c;每个数字以逗号分隔 input_nums input("请输入一些数字…

从0开始学统计-秩和检验

1.什么是秩和检验&#xff1f; 秩和检验&#xff0c;也称为Wilcoxon 秩和检验&#xff0c;是一种非参数统计检验方法&#xff0c;用于比较两个独立样本的中位数是否有显著差异。它不要求数据满足正态分布假设&#xff0c;因此适用于小样本或者数据不满足正态分布假设的情况。 …

51单片机-实机演示(单个数码管)

仿真单个数码管链接&#xff1a;http://t.csdnimg.cn/BLMut 一。插线 注意P00连接到A 测试代码为 #include <reg52.h> //此文件中定义了单片机的一些特殊功能寄存器// sbit KEY2 P3^2; // 独立按键2void main() {P0 0x00;while (1) {}…

Spring AOP实现Mapper层查询返回重新赋值

需求&#xff1a; 针对查询返回的数据&#xff0c;在数据库层处理可能会影响到性能&#xff0c;在考虑性能及维护方便的情况下&#xff0c;采用AOP实现 1&#xff0c;自定义注解 import java.lang.annotation.*;/*** 针对 mapper层返回值 按照一定规则进行特殊处理后返回*/ Ta…

Vue学习JSON.parse()与JSON.stringify()对象与字符串互转

Vue学习JSON.parse(&#xff09;与JSON.stringify(&#xff09;对象与字符串互转 一、前言1、代码 一、前言 JSON.parse() 和 JSON.stringify() 是 JavaScript 中用于处理 JSON 数据的两个方法。 JSON.parse() 方法将一个 JSON 字符串解析为对应的 JavaScript 对象或数组。例…

kaggle竞赛实战3

接前文&#xff0c;本文主要做以下几件事&#xff1a; 1、把前面处理完的几个表拼成一个大表 2、做特征衍生&#xff08;把离散特征和连续特征两两组合得出&#xff09; # In[89]: #开始拼接表 transaction pd.concat([new_transaction, history_transaction], axis0, ignor…

JAVA实现图书管理系统(初阶)

一.抽象出对象: 1.要有书架&#xff0c;图书&#xff0c;用户&#xff08;包括普通用户&#xff0c;管理员用户&#xff09;。根据这些我们可以建立几个包&#xff0c;来把繁杂的代码分开&#xff0c;再通过一个类来把这些&#xff0c;对象整合起来实现系统。说到整合&#xf…

[数组查找]2.图解二分查找及其代码实现

二分查找 二分查找也是一种在数组中查找数据的算法。和线性查找不同&#xff0c;它只能查找已经排好序的数据。二分查找通过比较数组中间的数据与目标数据的大小&#xff0c;可以得知目标数据是在数组的左边还是右边。因此&#xff0c;比较一次就可以把查找范围缩小一半。重复执…

嵌入式进阶——舵机控制PWM

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 舵机信号线代码示例初始化PWM初始化UART打印日志初始化外部中断Extimain函数 舵机最早用于船舶上实现转向功能,由于可以通过程序连…

MySQL中, 自增主键和UUID作为主键有什么区别?

首先我们来看看, 存储自增主键和uuid的数据类型 我们知道, mysql中作为主键的通常是int类型的数据, 这个 数据从第一条记录开始, 从1开始主键往后递增, 例如我有100条数据, 那么根据主键排序后, 里面的记录从上往下一次就是1, 2, 3 ... 100, 但是UUID就不一样了, UUID是根据特殊…

打卡信奥刷题(21)用Scratch图形化工具信奥P7071 [CSP-J2020] 优秀的拆分

使用2进制进行拆分是比较好的解决方案&#xff0c;毕竟对于大家来说二进制转换是非常熟的&#xff0c;如果不会可以参考打卡信奥刷题&#xff08;19&#xff09;用Scratch图形化工具信奥B3972 [语言月赛 202405] 二进制 题解 &#xff0c;输出的时候再转换一下输出&#xff0c;…

M功能-支付平台(三)

target&#xff1a;离开柬埔寨倒计时-221day 前言 今天周六&#xff0c;但是在柬埔寨还是工作日&#xff0c;想着国内的朋友开始休周末就羡慕呀&#xff0c;记不清在这边过了多少个周六了&#xff0c;多到我已经习惯了。而且今天技术部还停电了&#xff0c;真的是热的受不了呀…

c++11:智能指针的种类以及使用场景

指针管理困境 内存释放&#xff0c;指针没有置空&#xff1b;内存泄漏&#xff1b;资源重复释放 怎样解决&#xff1f; RAII 智能指针种类 shared_ptr 实现原理&#xff1a;多个指针指向同一资源&#xff0c;引用计数清零&#xff0c;再调用析构函数释放内存。 使用场景…

ASP.NET 代码审计

ASP.NET 官方文档 名词解释 IIS&#xff08;Internet Information Services&#xff09; IIS 是微软开发的一款 Web 服务器软件&#xff0c;用于在 Windows 服务器上托管和提供Web应用程序和服务。它支持 HTTP、HTTPS、FTP、SMTP 等多种协议&#xff0c;主要用于&#xff1a…

基于混合Transformer-CNN模型的多分辨率学习方法的解剖学标志检测

文章目录 Anatomical Landmark Detection Using a Multiresolution Learning Approach with a Hybrid Transformer-CNN Model摘要方法实验结果 Anatomical Landmark Detection Using a Multiresolution Learning Approach with a Hybrid Transformer-CNN Model 摘要 精确定位…

跨域计算芯片,一把被忽视的汽车降本尖刀

作者 |王博 编辑 |德新 2019年前后&#xff0c;「中央运算单元区域控制」的架构被提出。基于这一趋势&#xff0c;从板级的多芯片&#xff0c;到板级的单芯片&#xff0c;集成度越来越高&#xff0c;跨域计算芯片随之来到聚光灯下。 跨域计算芯片的特点是&#xff0c;与专为智…

Django 里传参给html文件

第一步&#xff1a;在 urls.py 文件里修改 from django.contrib import admin from django.urls import path from app01 import views # 添加这一行urlpatterns [#path(admin/, admin.site.urls),path(index/, views.index), # 添加这一行 ]第二步&#xff1a;在 settings…

若依框架的配置文件详解:从数据库配置到高级定制

若依框架&#xff08;RuoYi&#xff09;作为一个基于Spring Boot和MyBatis的快速开发平台&#xff0c;提供了丰富的配置选项&#xff0c;让开发者能够灵活地调整和扩展其功能。配置文件在若依框架中扮演着至关重要的角色&#xff0c;通过合理配置&#xff0c;可以实现对数据库连…