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

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

news 2025/8/26 4:55:14

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

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

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2025/8/24 18:38:30

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2025/8/22 4:40:29

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/8/7 3:55:08

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/8/21 17:01:42

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/7/9 20:53:30

ubuntu22.04有线网络无法连接，图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

编程新知 2025/8/22 6:27:37

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

编程新知 2025/8/3 13:40:26

实战设计模式之模板方法模式

概述 模板方法模式定义了一个操作中的算法骨架&#xff0c;并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下&#xff0c;重新定义算法中的某些步骤。简单来说&#xff0c;就是在一个方法中定义了要执行的步骤顺序或算法框架&#xff0c;但允许子类…...

编程新知 2025/8/24 22:47:33