网页设计--第5次课后作业

1、快速学习JavaScript的基本知识第1-10章

JavaScript入门 - 绿叶学习网

2、使用所学的知识完成以下练习。需求如下3

1)点亮灯泡

2)将所有的div标签的标签体内容后面加上  very good

3)使所有的复选框呈现被选中的状

效果如下所示

附源代码(先尽量自己做,然后再参考。)

<!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-对象-DOM-案例</title>
</head>

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

    <div class="cls">武汉科技大学</div>   <br>
    <div class="cls">信息管理系</div>  <br>

    <input type="checkbox" name="kemu"> 网页设计
    <input type="checkbox" name="kemu"> java程序设计
    <input type="checkbox" name="kemu"> 数据结构
</body>

<script>
    //1. 点亮灯泡 : src 属性值
    var img = document.getElementById('h1');
    img.src = "img/on.gif";

//2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
    const div = divs[i];
    div.innerHTML += "<font color='red'>very good</font>"; 
}


//3. 使所有的复选框呈现选中状态
var ins = document.getElementsByName('kemu');
for (let i = 0; i < ins.length; i++) {
    const check = ins[i];
    check.checked = true;//选中
}

</script>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

OpenHarmony模块化编译

一、环境配置 OpenHarmony版本&#xff1a;OpenHarmony 4.0 Release 编译环境&#xff1a;WSL2 Ubuntu 18.04 平台设备&#xff1a;RK3568 二、配置hb OpenHarmony 代码构建有build.sh和hb两种方式: #方式一、build.sh ./build.sh --product-name rk3568 --ccache#方式二、…

人工智能关键技术决定机器人产业的前途

人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;是指让计算机或机器具有类似于人类的智能和学习能力的技术。人工智能技术与机器人技术的结合将改变传统的机器人行业格局&#xff0c;就像智能手机对传统手机的颠覆一样。本文从人工智能技术的发展趋势、…

QT基础实践之简易计算器

文章目录 简易计算器源码分享演示图第一步 界面设计第二步 设置槽第三步 计算功能实现 简易计算器 源码分享 链接&#xff1a;https://pan.baidu.com/s/1Jn5fJLYOZUq77eNJ916Kig 提取码&#xff1a;qwer 演示图 第一步 界面设计 这里直接用了ui界面&#xff0c;如果想要自己…

ITIL4中自动化测试和质量保障的重要性

点击进入IT管理资料库 在迅速变革的科技世界中&#xff0c;IT服务管理的关键要素之一是自动化测试和质量保障。随着ITIL 4的崭新框架崛起&#xff0c;这两者不仅成为服务管理的重要组成部分&#xff0c;更是组织提高服务质量和效率的不可或缺的利器。 自动化测试和质量保障如何…

MySQL备份与恢复(重点)

MySQL备份与恢复&#xff08;重点&#xff09; 一、用户管理与权限管理 ☆ 用户管理 1、创建MySQL用户 注意&#xff1a;MySQL中不能单纯通过用户名来说明用户&#xff0c;必须要加上主机。如jack10.1.1.1 基本语法&#xff1a; mysql> create user 用户名被允许连接的主…

DM8数据库版本升级

DM数据库版本升级说明 DM数据库的版本一直在不断的的迭代。 对于DM 的数据库版本&#xff0c;分大版本和小版本。 1)大版本&#xff1a;指DM6&#xff0c;DM7&#xff0c;DM8 这种。2)小版本&#xff1a;指同一个大版本子版本的变化&#xff0c;比如DM8的&#xff1a;8.1.0.1…

Android修行手册 - 使用ViewPager2实现画廊效果

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

什么是Cyclomatic Complexity循环复杂度

Cyclomatic Complexity&#xff0c;可以翻译成 循环复杂度圈复杂度圈复杂性回路复杂性 循环复杂度是软件工程中的一个定量度量&#xff0c;表示程序或函数的复杂性。它衡量程序源代码中线性独立路径或分支的数量。如果一个函数的循环复杂度太高了&#xff0c;就需要进行重构。…

sqli-labs靶场详解less-24(二次注入)

less-24 对于一个像我一样的小白来说这关就像php代码审计 一开始进行判断注入点的时候怎么都找不到一点思路都没有 只能搜教程 说是二次注入 从来没遇见的题型 于是从代码审计开始 先说一下什么叫二次注入 二次注入 二次注入是指通过SQL语句存储到数据库的用户输入被读取后再次…

STM32_9(USART串口)

一、串口通信 串口是一种应用十分广泛的通讯接口&#xff0c;串口成本低、容易使用、通信线路简单&#xff0c;可实现两个设备的互相通信单片机的串口可以使单片机与单片机、单片机与电脑、单片机与各式各样的模块互相通信&#xff0c;极大地扩展了单片机的应用范围&#xff0…

西南科技大学(数据结构A)期末自测练习一

一、填空题(每空0.5分,共5分) 1、数据结构是指( A )。 A、数据元素的组织形式 B、数据类型 C、数据存储结构 D、数据定义 2、数据结构被形式地定义为(D,R),其中D是( B )的有限集合,R是D上( D )的有限集合。 (1)A.算法B.数据元素C.数据操作D.逻辑结构 (2)A.操作B.…

滴滴昨晚崩了,看这波还敢不敢降本增效?

起因 截至 2023 年 11 月 27 日晚&#xff0c;中国最大的网约车服务平台滴滴打车遭遇系统崩溃&#xff0c;继阿里云控制台故障之后&#xff0c;再次引发热议。这一事件迅速攀升至热搜榜首&#xff0c;引起广泛关注。 今晚约 10 点&#xff0c;滴滴打车遭遇大范围技术故障。用户…

小程序----使用图表显示数据--canvas

需求&#xff1a;在小程序上实现数据可视化 思路&#xff1a;本来想用的是echarts或者相关的可视化插件&#xff0c;但因为用的是vue3&#xff0c;大多数插件不支持&#xff0c;所以用了echarts&#xff0c;但最后打包的时候说包太大超过2M无法上传&#xff0c;百度了一下&…

[Linux] 正则表达式及grep和awk

一、正则表达式 1.1 什么是正则表达式 正则表达式是一种用于匹配和操作文本的强大工具&#xff0c;它是由一系列字符和特殊字符组成的模式&#xff0c;用于描述要匹配的文本模式。 正则表达式可以在文本中查找、替换、提取和验证特定的模式。 正则表达式和通配符的区别 正则…

继承JsonSerializer+注解实现自定义数据脱敏方案

1、数据脱敏 数据脱敏是一种保护隐私数据的技术&#xff0c;通过将敏感信息转化为非敏感信息来实现对数据的保护&#xff0c;以保护敏感隐私数据的可靠性和安全性。 数据脱敏可以分为可恢复和不可恢复两类: 可恢复类可以通过一定的方式恢复成原来的敏感数据。不可恢复类则无…

计算机基础知识59

MySQL的卸载流程 1、先停止MySQL服务&#xff1a;右键“此电脑”&#xff0c;选择“管理”&#xff0c;之后选择“服务和应用程序”--“服务”&#xff0c;在服务中找到“MySQL”&#xff0c;右键选择“停止”。 2、找到“控制面板”--“程序和功能”&#xff0c;找到MySQL&…

C++二分查找视频教程:两数之和

作者推荐 利用广度优先或模拟解决米诺骨牌 本文涉及的基础知识点 二分查找算法合集 题目 给你一个下标从 1 开始的整数数组 numbers &#xff0c;该数组已按 非递减顺序排列 &#xff0c;请你从数组中找出满足相加之和等于目标数 target 的两个数。如果设这两个数分别是 n…

Find My键盘|苹果Find My技术与键盘结合,智能防丢,全球定位

键盘是最常用也是最主要的输入设备&#xff0c;通过键盘可以将英文字母、汉字、数字、标点符号等输入到计算机中&#xff0c;从而向计算机发出命令、输入数据等。还有一些带有各种快捷键的键盘。随着时间的推移&#xff0c;渐渐的市场上也出现独立的具有各种快捷功能的产品单独…

STK Components 二次开发- StarLink

1.星链数据下载 CelesTrak: Current GP Element Sets 下载二根数就可以。 2.处理数据 下载下来的数据是这样&#xff0c;要将字符串转为 二根数对象 TwoLineElementSet tle new TwoLineElementSet(tleString); Sgp4Propagator propagator new Sgp4Propagator(tle); 3.批量…

linux task_struct中进程调度相关的变量记录

参考文章&#xff1a; Linux进程调度分析记录&#xff0c;进程优先级&#xff0c;隔离处理器&#xff0c;isolcpus - 知乎