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

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

news 文章来源：https://blog.csdn.net/m0_55709044/article/details/139390158 2025/5/4 13:10:06

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

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

20 道大模型面试问题（含答案）

大型语言模型在生成式人工智能&#xff08;GenAI&#xff09;和人工智能&#xff08;AI&#xff09;中正变得越来越有价值。这些复杂的算法增强了人类的能力&#xff0c;并在各个领域促进了效率和创造力。 节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0…...

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

【Java面试】四、MySQL篇（上）

文章目录 1、定位慢查询2、慢查询的原因分析3、索引3.1 数据结构选用&#xff1a;二叉树 & 红黑树3.2 数据结构选用&#xff1a;B树 4、聚簇索引、非聚簇索引、回表查询4.1 聚簇索引、非聚簇索引4.2 回表查询 5、覆盖索引、超大分页优化5.1 覆盖索引5.2 超大分页处理 6、索…...

编程日记 2024/6/3 0:19:07

【Python】collections模块：高效处理数据的利器

Python中的collections模块&#xff1a;高效处理数据的利器 Python的collections模块是一个内置模块&#xff0c;它提供了一些专用的容器数据类型&#xff0c;作为Python通用内置容器&#xff08;如列表list、字典dict、集合set和元组tuple&#xff09;的替代品。本文将深入探…...

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

Vue3实战笔记（51）—Vue 3封装带均线的k线图

文章目录 前言带均线的k线图总结 前言 继续封装一个封装带均线的k线图 带均线的k线图 EChartsCandlestickSh.vue&#xff1a; <template><div ref"chartContainer" style"width: 100%; height: 500px"></div></template><scr…...

编程日记 2024/6/3 0:17:05

信息与未来2015真题笔记

[信息与未来 2015] 加数 题目描述 给出一个正整数 n n n&#xff0c;在 n n n 的右边加入 ⌊ n 2 ⌋ \left\lfloor\dfrac n2\right\rfloor ⌊2n​⌋&#xff0c;然后在新数的右边 再加入 ⌊ ⌊ n 2 ⌋ 2 ⌋ \left\lfloor\dfrac{\left\lfloor\dfrac n2\right\rfloor}2\rig…...

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

【成功解决】Access token invalid or no longer valid

项目场景&#xff1a; python调用文心一言对应的ERNIE-4.0-8K模型API接口&#xff0c;方式为单次调用 问题描述 提示&#xff1a; “error_code”: 110, “error_msg”: “Access token invalid or no longer valid” C:\Users\PUB\AppData\Local\Programs\Python\Python38-…...

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

【Bug】修改计算机名称出现ip无法连接mysql数据库

解决&#xff1a; mysql -u root -p输入密码登录mysql服务器&#xff0c;那个ip是本机ip4的地址单ip放行。推荐全部&#xff0c;后面123456是密码 GRANT ALL PRIVILEGES ON *.* TO root192.168.0.109 IDENTIFIED BY 123456; 全部IP都放行 GRANT ALL PRIVILEGES ON *.* …...

编程日记 2024/6/3 0:10:59

米尔MYC-Y6ULX-V2开发板测评记录

文章目录 1、板子上手体验2、板载硬件3、系统信息4、 驱动测试5、编译linux三大件7、摄像头测试9、总结 1、板子上手体验 首先非常感谢芯查查给了这样一个机会来测评这样一款性能十分强大的开发板&#xff0c;我拿到手的是MYC-Y6ULX-V2核心板及开发板&#xff0c;这块板子具有…...

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

装修全流程

Summary 从2023年底到现在&#xff08;2024年6月2日&#xff09;&#xff0c;装修可以定的东西基本过半了&#xff0c;我按照时间顺序把每个环节的内容和想法都记录一下 环节 选装修公司、找设计师设计环节预算计算角色介绍建材选型敲墙和开工水电放样泥工木工放样To be cont…...

编程日记 2024/6/3 0:08:57

探索微软Edge

微软开发的官方浏览器 Microsoft Edge是微软基于 Chromium 开源项目及其他开源软件开发的网页浏览器。 2015年4月30日&#xff0c;微软在旧金山举行的Build 2015开发者大会上宣布——Windows 10内置代号为“Project Spartan”的新浏览器被正式命名为“Microsoft Edge”&#x…...

编程日记 2024/6/3 0:07:56