第二次上机测试:Javascript. (第一组)

news2024/11/23 18:47:06

需求:(注意在规定的时间,在自己的博客提交作品,便于统计测试的完成情况。博客题目《第二次上机测试:Javascript.》)

1、点击按钮,将图片加上边框

2、点击按钮,将图片缩小为长和宽都为50px

3、点击反选按钮,单选框改为选中第2个。

------------》〉》

附:参考答案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="img/off.gif"> <br>

    <input type="button" value="加边框" onclick="biankuang()"> 
    <input type="button"  value="变成50px宽" onclick="off()">

    <br> <br>

    <input type="radio" name="hobby" checked> 男
    <input type="radio" name="hobby"> 女

    <br>

    <input type="button" value="反选" onclick="reverse()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
    function biankuang(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 
        img.style.border = "1px solid green";
    }

    function off(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 设置属性
        img.style.width = "50px";
        img.style.height="50px";
    }



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick

    
    function reverse(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");
        hobbys[1].checked = true;

    }



</script>
</html>

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

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

相关文章

windows安装protoc、protoc-gen-go、protoc-gen-go-grpc

文章目录 一、 protoc二、protoc-gen-go三、protoc-gen-go-grpc 一、 protoc 1&#xff0c;下载&#xff1a;https://github.com/google/protobuf/releases 下载对应的protoc&#xff0c;注意选择windows 2&#xff0c;下好之后解压就行&#xff0c;然后把bin目录加入到环境…

无损放大神器,Topaz Gigapixel AI,让你的图像更清晰!

无论是摄影爱好者、设计师还是专业摄影师&#xff0c;我们都希望能够拍摄到最清晰、最细腻的图像。然而&#xff0c;在现实生活中&#xff0c;我们往往会面临图像放大后模糊失真的问题。为了解决这一难题&#xff0c;我们推荐一款强大的图像无损放大工具——Topaz Gigapixel AI…

2020年第九届数学建模国际赛小美赛B题血氧饱和度的变异性解题全过程文档及程序

2020年第九届数学建模国际赛小美赛 B题 血氧饱和度的变异性 原题再现&#xff1a; 脉搏血氧饱和度是监测患者血氧饱和度的常规方法。在连续监测期间&#xff0c;我们希望能够使用模型描述血氧饱和度的模式。   我们有36名受试者的数据&#xff0c;每个受试者以1 Hz的频率连…

对python自动生成接口测试的示例讲解

在python中Template可以将字符串的格式固定下来&#xff0c;重复利用。 同一套测试框架为了可以复用&#xff0c;所以我们可以将用例部分做参数化&#xff0c;然后运用到各个项目中。 代码如下&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 2…

GPT-4 变懒了?官方回复

你是否注意到&#xff0c;最近使用 ChatGPT 的时候&#xff0c;当你向它提出一些问题&#xff0c;却得到的回应似乎变得简短而敷衍了&#xff1f;对于这一现象&#xff0c;ChatGPT 官方给出了回应。 译文&#xff1a;我们听到了你们所有关于 GPT4 变得更懒的反馈&#xff01;我…

记录 | vscode设置自动换行

右上菜单栏 -> 查看 -> 打开自动换行 或者还有种方式&#xff0c;如下&#xff0c; 左下角小齿轮&#xff0c;点击设置 然后输入 Editor: Word Wrap &#xff0c;把开关打开为 on

web前端开发html/css练习

目标图&#xff1a; 素材&#xff1a; 代码&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"…

【ET8】2.ET8入门-ET框架解析

菜单栏相关&#xff1a;ENABLE_DLL选项 ET->ChangeDefine->ADD_ENABLE_DLL/REMOVE_ENABLE_DLL 一般在开发阶段使用Editor时需要关闭ENABLE_DLL选项。该选项关闭时&#xff0c;修改脚本之后&#xff0c;会直接重新编译所有的代码&#xff0c;Editor在运行时会直接使用最…

【Vue3+Ts项目】硅谷甄选 — 路由配置+登录模块+layout组件+路由鉴权

一、路由配置 项目一共需要4个一级路由&#xff1a;登录&#xff08;login&#xff09;、主页&#xff08;home&#xff09;、404、任意路由&#xff08;重定向到404&#xff09;。 1.1 安装路由插件 pnpm install vue-router 1.2 创建路由组件 在src目录下新建views文件…

STM32F1之CAN介绍

目录 ​编辑 1. CAN 是什么&#xff1f; 2. 总线拓扑图 3. CAN 的特点 4. CAN 协议的基本概念 1. CAN 是什么&#xff1f; CAN 是 Controller Area Network 的缩写&#xff08;以下称为 CAN&#xff09;&#xff0c;是 ISO*1 国际标准化的串行通信协议。 在当前的汽车产…

FPGA时序分析与约束(0)——目录与传送门

一、简介 关于时序分析和约束的学习似乎是学习FPGA的一道分水岭&#xff0c;似乎只有理解了时序约束才能算是真正入门了FPGA&#xff0c;对于FPGA从业者或者未来想要从事FPGA开发的工程师来说&#xff0c;时序约束可以说是一道躲不过去的坎&#xff0c;所以这个系列我们会详细介…

vertica主键列能插入重复值的处理办法

问题描述 开发同事反馈在vertica中创建含主键列的表中插入重复数据时没有进行校验&#xff0c;插入重复值成功。经过测试着实可以插入重复值&#xff0c;这个坑有些不一样。 创建表和插入语句如下&#xff1a; --创建表 CREATE TABLE dhhtest(ID VARCHAR(64) PRIMARY KEY );…

2024年度AI投资策略报告:AI三要素共振,AIGC云到端加速推进

今天分享的AI系列深度研究报告&#xff1a;《2024年度AI投资策略报告&#xff1a;AI三要素共振&#xff0c;AIGC云到端加速推进》。 &#xff08;报告出品方&#xff1a;中国银河证券研究院&#xff09; 报告共计&#xff1a;103页 核心观点:行业热度将持续&#xff0c;积极把…

Git版本控制---入门学习

1.简介 是一个免费的开源分布式版本控制系统工具&#xff0c;旨在快速高效地处理从小型到大型的所有项目。 它是由 Linus Torvalds 在2005年创建的&#xff0c;用于开发 Linux 内核。 Git具有大多数团队和开发人员所需的功能、性能、安全性和灵活性。 它还用作重要的分布式版本…

深度学习——第3章 Python程序设计语言(3.8 深度学习框架PyTorch)

3.8 深度学习框架PyTorch 目录 1. PyTorch简介 2. PyTorch的安装 3. PyTorch相关资源 4. 张量 5. 自动求导 6. 并行计算简介 7. AI硬件加速设备 PyTorch简介 PyTorch是由Meta AI(Facebook)人工智能研究小组开发的一种基于Lua编写的Torch库的Python实现的深度学习库&…

Gemini 能够拯救的谷歌吗?

没有人会记住第二个登上月球的人&#xff0c;除了他自己。 谷歌现在处于尴尬的地位&#xff0c;在 2022 年之前&#xff0c;他以 Chrome Google 搜索确立搜索领域绝对霸主之位&#xff0c;全球市场份额高达 90% 之多&#xff0c;FireFox、Opera 等等浏览器都难以匹敌。而随着 …

枚举 LeetCode2048. 下一个更大的数值平衡数

如果整数 x 满足&#xff1a;对于每个数位 d &#xff0c;这个数位 恰好 在 x 中出现 d 次。那么整数 x 就是一个 数值平衡数 。 给你一个整数 n &#xff0c;请你返回 严格大于 n 的 最小数值平衡数 。 如果n的位数是k&#xff0c;n它的下一个大的平衡数一定不会超过 k1个k1…

JS中的模糊查询功能

什么是模糊查询 模糊查询是指可以在不明确指定查询条件的情况下&#xff0c;自动查找与指定字符串相似的内容。例如&#xff0c;我们在搜索引擎中输入关键字时&#xff0c;就会出现相关的搜索结果&#xff0c;这就是利用了模糊查询功能。 在JS中&#xff0c;我们可以利用一些…

Python:核心知识点整理大全9-笔记

目录 ​编辑 5.2.4 比较数字 5.2.5 检查多个条件 1. 使用and检查多个条件 2. 使用or检查多个条件 5.2.6 检查特定值是否包含在列表中 5.2.7 检查特定值是否不包含在列表中 banned_users.py 5.2.8 布尔表达式 5.3 if 语句 5.3.1 简单的 if 语句 5.3.2 if-else 语句 …

中间件系列 - Redis入门到实战(基础篇)

前言 1.学习视频&#xff1a; 黑马程序员Redis入门到实战教程&#xff0c;深度透析redis底层原理redis分布式锁企业解决方案黑马点评实战项目 2. 本内容仅用于个人学习笔记&#xff0c;如有侵扰&#xff0c;联系删除 3. 本章学习目标&#xff1a; 初始Redis 认识NoSQL认识Redi…