当前位置： 首页 > news >正文

html+CSS+js部分基础运用11

news 2025/12/26 14:08:48

一、改变新闻网页中的字号

1、设计如图1-1所示的界面，要求当网络访问者选择字号中的【大、中、小】时能实现页面字号大小变化，选择“中”时，页面效果如图1所示。

图1 单击前初始状态页面

图2 单击“中”链接后页面

2、div中内容如下：

JavaScript是一种能让你的网页更加生动活泼的程式语言，也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。

3、Style对象的属性。

可通过HTML DOM Style 对象网页查看。

二、消息对话框综合应用

设计一个消息对话框综合应用，页面效果如图3-图6所示。

图3 消息对话框初始页面

图4 点击“输入姓名”后的页面

                    

图5 提示框信息

图6 告警消息对话框页面

三、编写JavaScript程序实现简易密码验证，页面布局如图7所示：

图7简易密码验证对话框

要求：定义函数checkKey(),函数的功能是判断密码输入框输入的密码长度是否大于或者等于8，密码支付中是否含一个及以上个字母，若不符合要求则提示告警信息分别为“密码长度必须大于等于8！，请重输”，“密码中必须包含一个或者以上字母！，请重输”，单机告警框中的“确认”按钮，将原密码框内容清空。

1.

        <script type="text/javascript">

            //定义设置字体大小函数

            function $(id){return document.getElementById(id);}

            function setFont(size){

                $("content").style.fontSize=size;

            }

        </script>

使用document.getElementById(id)函数和ID定义设置字体大小函数。

        <div id="div1">选择字号【 &nbsp;<a href="#" onclick="setFont('12px');">小</a>&nbsp;

            <a href="#" onclick="setFont('18px');">中</a>&nbsp;

            <a href="#" onclick="setFont('24px');">大</a>】

        </div>

利用超链接和设置字体大小函数完成改变新闻网页中的字号的要求。

2.

     <script>

        function mj(id) {

            var n=prompt("输入你的姓名：");

            if(n!=null&&n!=""){

                alert("你的姓名是："+n);

                document.getElementById(id).value=n;

            }

            else alert("请你输入姓名！");

        }

       

    </script>

        <form>

            <fieldset>

                <legend>消息对话框综合应用</legend><br>

                <span> 姓名：<br></span><br>

                <span><input type="text" id="look" readonly="readonly"></span><br><br><br>

                <p align="center"><input type="button" name="button" value="输入姓名" onclick="mj('look')">

                <input type="reset" name="reset" value="清空" ></p>

            </fieldset>

        </form>

使用document.getElementById(id)函数和ID加js 变量完成动态变化表单数值的效果。

3.

    <script>

        function $(id){return document.getElementById(id);}

        function submittext(){

            var n=$("input1").value;

            if(n.length>=8){

                var x1=/^[0-9a-zA-Z]+$/;

                var x2=/^[0-9]+$/;

                if(!x2.test(n))

                {              

                    if(!x1.test(n))          

                    {              

                        alert("密码至少包括一个字母！请重新输入！");    

                        $("input1").value="";  

                    }

                    else alert("输入成功！");

                }

                else {      

                    alert("密码至少包括一个字母！请重新输入！");

                    $("input1").value="";

                }

            }

            else{  

                alert("密码必须大于等于8！");  

                $("input1").value="";

            }

        }

    </script>

借用正则表达式的test函数使用3层if判断 实现简易密码验证的要求。

图1      

图2

图3

图4

图5

图6

图7

图8

  • 1.

<!-- prj_9_1.html  -->

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

        <title> 改变新闻网页中字号 </title>

        <style type="text/css">    

            #div1{text-align:center;font-size:16px;} /*定义图层样式*/

            #content{

                font-size:12px;line-height:2em;padding:10px;

                background:#c0c0c0;color:black;border:2px groove #FCFF57;}

            p{text-indent:2em;}  /*定义段落样式*/

        </style>

        <script type="text/javascript">

            //定义设置字体大小函数

            function $(id){return document.getElementById(id);}

            function setFont(size){

                $("content").style.fontSize=size;

            }

        </script>

    </head>

    <body>

        <h2 align="center">用JavaScript改变新闻网页中字号</h2>

        <div id="div1">选择字号【 &nbsp;<a href="#" onclick="setFont('12px');">小</a>&nbsp;

            <a href="#" onclick="setFont('18px');">中</a>&nbsp;

            <a href="#" onclick="setFont('24px');">大</a>】

        </div>

        <div id="content">

            <p>JavaScript是一种能让你的网页更加生动活泼的程式语言，也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。</p>

        </div>

    </body>

</htmL>

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>Document</title>

    <style>

        legend{text-align: center;}

        fieldset{border-color: blue;b

相关文章：

html+CSS+js部分基础运用11

一、改变新闻网页中的字号 1、设计如图1-1所示的界面&#xff0c;要求当网络访问者选择字号中的【大、中、小】时能实现页面字号大小变化&#xff0c;选择“中”时&#xff0c;页面效果如图1所示。 图1 单击前初始状态页面 图2 单击“中”链接后页面 2、div中内容如下&#x…...

编程日记 2024/6/3 0:51:41

6，串口编程———通过串口助手发送数据，控制led亮灭

//功能&#xff1a;串口助手每次发送数据格式&#xff1a;0000& // 第二个字节控制LED1亮灭 // 第三个字节控制LED2亮灭 // 第四个字节控制LED3亮灭 // 第无个字节控制LED4亮灭 //要求&#xff1a;代码能够一直运行&#xff0c;能够接收多字节数据 上节讲了串口的基本…...

编程日记 2024/6/3 0:49:39

【java】【python】leetcode刷题记录--栈与队列

232 用栈实现队列 题目描述 两个栈模拟队列的思路是利用栈&#xff08;后进先出结构&#xff09;的特性来实现队列&#xff08;先进先出结构&#xff09;的行为。这种方法依赖于两个栈来逆转元素的入队和出队顺序&#xff0c;从而实现队列的功能。 入队操作&#xff08;使用s…...

编程日记 2024/6/3 0:48:38

java并发常见问题

1.死锁&#xff1a;当两个或多个线程无限期地等待对方释放锁时发生死锁。为了避免这种情况&#xff0c;你应该尽量减少锁定资源的时间&#xff0c;按顺序获取锁&#xff0c;并使用定时锁尝试。 2.竞态条件&#xff1a;当程序的行为依赖于线程的执行顺序或输入数据到达的顺序时…...

编程日记 2024/6/3 0:47:37

联芸科技偏高的关联交易：业绩波动性明显，海康威视曾拥有一票否决

《港湾商业观察》施子夫 5月31日&#xff0c;上交所上市审核委员会将召开2024年第14次审议会议&#xff0c;届时将审议联芸科技&#xff08;杭州&#xff09;股份有限公司招股书&#xff08;以下简称&#xff0c;联芸科技&#xff09;的首发上会事项。 据悉&#xff0c;此次系…...

编程日记 2024/6/3 0:46:36

hexo init命令报错：Error: EPERM: operation not permitted, mkdir ‘D:\‘

我用的是git bash通过hexo init安装hexo的&#xff0c;但是报错如下&#xff1a; $ hexo init INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git fatal: unable to access https://github.com/hexojs/hexo-starter.git/: HTTP/2 stream 1 was not clos…...

编程日记 2024/6/3 0:45:35

day-37 最大正方形

思路 动态规划&#xff0c;这题主要得弄明白状态转换方程&#xff0c;dp[i][j]表示以&#xff08;i,j&#xff09;为右下角的最大正方形 解题方法 1.首先将第一行和第一列初始化&#xff0c;当对应位置的matrix为’0’时&#xff0c;dp数组对应位置也为零&#xff0c;否则为1 …...

编程日记 2024/6/3 0:43:32

springboot 3.3版本 类数据共享（CDS）提升启动速度 使用方法+Docker打包代码

springboot 3.3 版本已经正式发布&#xff0c;新版本提供了类数据共享&#xff08;CDS&#xff09;功能&#xff0c;通过将类元数据缓存在 Archive&#xff08;归档/存档&#xff09; 文件中&#xff0c;使其可以快速预加载到新启动的 JVM 中&#xff0c;从而帮助缩短 JVM 的启…...

编程日记 2024/6/3 0:42:31

Django 目录

Django 创建项目及应用-CSDN博客 Django 注册应用-CSDN博客 Django 应用的路由访问-CSDN博客 Django templates 存放html目录-CSDN博客 Django 解析路由参数-CSDN博客 Django 用re_path()方法正则匹配复杂路由-CSDN博客 Django 反向解析路由-CSDN博客 Django HttpReques…...

编程日记 2024/6/3 0:41:29

VirtualBox Ubuntu系统硬盘扩容

1、关闭虚拟机&#xff0c;找到需要扩容的硬盘&#xff0c;修改为新的容量80GB&#xff0c;应用保存。 2、打开VM&#xff0c;进入系统&#xff0c;使用lsblk可以看到硬盘容量已经变为80GB&#xff0c;但硬盘根分区还没有扩容&#xff0c;使用df查看根文件系统也没有扩容。 [19…...

编程日记 2024/6/3 0:39:27

【自动驾驶】针对低速无人车的线控底盘技术

目录 术语定义 一般要求 操纵装置 防护等级 识别代号 技术要求 通过性要求 直线行驶稳定性 环境适应性要求 功能安全要求 信息安全要求 故障处理要求 通信接口 在线升级(OTA) 线控驱动 动力性能 驱动控制响应能力 线控制动 行车制动 制动响应能力 线控转向 总体要求 线控…...

编程日记 2024/6/3 0:38:26

Kotlin 继承和实现

文章目录 前言继承&#xff08;extend&#xff09;实现&#xff08;implement&#xff09;继承与实现 前言 在 Kotlin 中&#xff0c;继承和实现都是在类名后使用冒号:&#xff0c;后边加上其他类或接口的名称来表示&#xff0c;二者之间写法没有太大区别&#xff08;类需要加…...

编程日记 2024/6/3 0:37:25

MATLAB误差估计扩展卡尔博斯方法的目录大纲

MATLAB误差估计扩展卡尔博斯方法的目录大纲 目录&#xff1a; 一、引言 1.1 背景介绍 1.2 研究意义 二、基本理论 2.1 误差估计的基本概念 2.2 卡尔博斯方法的基本原理 三、MATLAB误差估计扩展卡尔博斯方法 3.1 MATLAB简介 3.2 MATLAB在误差估计中的应用 3.3 MATLAB扩展卡尔…...

编程日记 2024/6/3 0:36:24

NetMizer 日志管理系统前台RCE漏洞

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 一、产品介绍 NetMizer日志管理系统是一个与NetMizer流量管理设备配合…...

编程日记 2024/6/3 0:35:23

【spring】第二篇 bean实例化

对象已经能交给Spring的IOC容器来创建了&#xff0c;但是容器是如何来创建对象的呢? 就需要研究下bean的实例化过程&#xff0c;在这块内容中主要解决两部分内容&#xff0c;分别是 bean是如何创建的 实例化bean的三种方式&#xff0c;构造方法,静态工厂和实例工厂 在讲解这…...

编程日记 2024/6/3 0:32:20

MVC和MVVM

MVC Model层&#xff1a;用于处理应用程序数据逻辑的部分&#xff0c;通常负责在数据库中存取数据 View&#xff08;视图&#xff09;处理数据显示的部分。通常视图是依据模型数据创建的 Controller&#xff08;控制器&#xff09;是处理用户交互的部分。通常控制器负责从视…...

编程日记 2024/6/3 0:30:18

【康耐视国产案例】智能AI相机机器视觉精准快速实现包裹标签的智能粘贴

康耐视推出的3D-A1000是专业的、匹配物流行业各类分拣机及包裹检测应用的全功能视觉检测系统&#xff0c;其能够准确检测分拣机上是否有包裹、包裹是否超出边界、空车检测、是否有遗留物品等。由于搭载了专利的三维结构光技术&#xff0c;产品具有更强大的创新性以满足持续更新…...

编程日记 2024/6/3 0:28:16

发现真正的诉求

在不久前&#xff0c;我在负责一个项目&#xff0c;设计了一个方案。但是&#xff0c;与我一同合作的同事对其中的一个设计点持有异议。我们尝试讨论解决&#xff0c;但似乎没有找到共识。然而&#xff0c;尽管双方的观点没有达成一致&#xff0c;我们都清楚地表达了自己的想法…...

编程日记 2024/6/3 0:27:14

Spring Boot配置MySQL数据库连接数

1.如何在Spring Boot中配置MySQL数据库的连接数 1.1主要配置 在Spring Boot中配置MySQL数据库连接数通常涉及到两个主要的配置&#xff1a; &#xff08;1&#xff09;数据源配置&#xff1a;这通常是在application.properties或application.yml文件中完成的&#xff0c;用于…...

编程日记 2024/6/3 0:24:12

springboot595基于Java的大学生迎新系统-手把手调试搭建

springboot595基于Java的大学生迎新系统-手把手调试搭建 springboot595基于Java的大学生迎新系统-手把手调试搭建...

编程日记 2024/6/3 0:21:09

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/12/25 14:51:57

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/12/19 17:19:04

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/12/17 20:13:54

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2025/12/8 14:57:15

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/12/25 4:57:02

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/12/22 9:57:58

Python Ovito统计金刚石结构数量

大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2025/12/24 5:42:18