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

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

news 2025/11/9 23:38:01

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

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

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/11/7 14:07:42

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/9/23 9:00:33

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/11/7 21:04:12

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/11/8 3:16:06

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/11/8 3:52:43

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/11/9 15:32:13

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/9/30 5:23:30

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/10/24 12:31:26

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/9/12 8:21:45

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2025/11/9 15:24:39