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

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

news 2025/9/12 16:27:43

1、完成输入框内容的实时反向输出。

2、银行账户余额变动自动通知项目。

设计要求：单击按钮后，余额按照输入框的数额减少，同时将按钮式的提示信息（金额）同步改变。利用侦听属性实现余额发生变化时发出提示信息，同时记录每次支出明细，每笔记录包含支取次数，支取金额、余额等信息。

3、学生信息采集

① 定义Vue实例，分别完成el、data、methods、watch等选项的配置

  1. 定义data，分别定义为name、province、city、street、address等初始值（为空）
  2. 定义methods选项。在其中定义getAddress()方法，其功能是讲变化的省份、城市、县、街道信息组合起来，赋值个家庭地址
  3. 定义watch选项。在其中定义handler()方法，并使用immediate/deep等属性，设置他们的值为true，立即触发视图更新，并深度侦听相关属性值的变化。分别定义province、city、street等属性，将新值赋值给相关属性，立即渲染。

② 信息采集。分别通过表单输入获取省份、城市、县、街道等信息，只要其中有一个值发生变化，都需要绑定keyup事件，调用getAddress()方法，触发更新家庭地址。

  • 1.

    <div id="app">

        <hr>

        输入内容：<input type="text" v-model="message"><br>

        反转内容：{{message.split('').reverse().join('')}}

    </div>

  • 借助message.split('').reverse().join('')完成输入框内容的实时反向输出。
  • 2.

  new Vue({

            el:'#app',

            data:{

               

                money1:100000,

                money2:500,

                money3:100000,

                sum:0,      

            },

            watch:{

                money3:{

                    handler:function(newValue,oldValue){

                        alert("账户余额由"+oldValue+"元变为"+newValue+"元");

                        console.log("账户余额由"+oldValue+"元变为"+newValue+"元")

                    }

                }

               

                       

                   

               

            },

            methods:{

                updata:function(){

                    this.money3=this.money3-this.money2;

                    this.money1=this.money3;

                    this.sum=this.sum+1;

                    var objSelect=document.getElementById("number8");  

                    objSelect.focus();

                    var s=null;

                    s="第"+this.sum+"次，支取"+this.money2+"元，余额为"+this.money1;

                    objSelect.options.add(new Option(s,));

                    this.money2=0;        

                   

                },

  • 借助vue框架监听加methods中的方法完成银行账户余额变动自动通知项目。
  • 3.

    <script>

        new Vue({

            el:"#app",

            data:{              

               

                    province:'',              

                    city:'',

                    street:'',

                    address:'',  

                           

            },

            watch:{

                province:{

                    handler: function (newValue, oldValue) {

                    console.log("对象记录：新值："+newValue + "--------- 旧值："+oldValue)

                },

                }

            },

            methods:{

                getAddress:function(){

                   this.address=this.province+" "+this.city+" "+this.street;

               }

            }

        })

    </script>

  • 借助Vue框架watch方法和methods方法完成大部分功能。

1

2

3

JavaScript使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互的表达能力。从而基于CGI静态的HTML、页面将被可提供动态实时信息并可监视信息变化。

1.

<!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>

    <script src="vue.js"></script>

</head>

<body>

    <div id="app">

        <hr>

        输入内容：<input type="text" v-model="message"><br>

        反转内容：{{message.split('').reverse().join('')}}

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                message:''

            }

        })

    </script>

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

    <script src="vue.js"></script>

</head>

<body>

    <div id="app">

        <h3>银行账户余额变更通知</h3>

        余额为：{{money1}}元<br>

        支取人民币为：<input type="text" v-model="money2"><button v-on:click="updata">支取{{money2}}元</button><br>

        支取后人民币余额为：{{money3}}元<br>

        <h3>以下是支出明细账</h3>

        <hr size="2">

        <table>

            <tr>

                <td rowspan="3">

        <select name="number7" id="number8" size="2" οnfοcus=”this.select()” οnmοuseοver=”this.focus()”>

        </select>

                </td>

            </tr>

        </table>

    </div>

    <script>

       

        new Vue({

            el:'#app',

            data:{

               

                money1:100000,

                money2:500,

                money3:100000,

                sum:0,      

            },

            watch:{

                money3:{

                    handler:function(newValue,oldValue){

                        alert("账户余额由"+oldValue+"元变为"+newValue+"元");

                        console.log("账户余额由"+oldValue+"元变为"+newValue+"元")

                    }

                }

               

                       

                   

               

            },

            methods:{

                updata:function(){

                    this.money3=this.money3-this.money2;

                    this.money1=this.money3;

                    this.sum=this.sum+1;

                    var objSelect=document.getElementById("number8");  

                    objSelect.focus();

                    var s=null;

                    s="第"+this.sum+"次，支取"+this.money2+"元，余额为"+this.money1;

                    objSelect.options.add(new Option(s,));

                    this.money2=0;        

                   

                },

      }

            }

        )

    </script>

</body>

</html>

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

    <script src="vue.js"></script>

</head>

<body>

    <div id="app">

        <form action="">

            <fieldset>

                <legend align="center">学生地址信息采集</legend>

                姓名：<input type="text" v-model="name"><br>

                <hr>

                省份：<input type="text" v-model="province" v-on:keyup="getAddress()"><br>

                城市：<input type="text" v-model="city" v-on:keyup="getAddress()"><br>

                县、区或街道：<input type="text" v-model="street" v-on:keyup="getAddress()"><br>

                家庭地址：<input type="text" v-model="address" v-on:keyup="getAddress()"><br>

                <input type="submit" value="提交">&nbsp;&nbsp;&nbsp;<input type="reset" value="重置">

               

            </fieldset>

        </form>

    </div>

    <script>

        new Vue({

            el:"#app",

            data:{              

               

                    province:'',              

                    city:'',

                    street:'',

                    address:'',  

                           

            },

            watch:{

                province:{

                    handler: function (newValue, oldValue) {

                    console.log("对象记录：新值："+newValue + "--------- 旧值："+oldValue)

                },

                }

            },

            methods:{

                getAddress:function(){

                   this.address=this.province+" "+this.city+" "+this.street;

               }

            }

        })

    </script>

</body>

</html>

相关文章：

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

1、完成输入框内容的实时反向输出。 2、银行账户余额变动自动通知项目。 设计要求&#xff1a;单击按钮后&#xff0c;余额按照输入框的数额减少&#xff0c;同时将按钮式的提示信息&#xff08;金额&#xff09;同步改变。利用侦听属性实现余额发生变化时发出提示信息&#x…...

编程日记 2024/6/7 13:52:28

从零开始学JAVA

一、编写Hello world程序 public class JavaMain1 {//主程序执行入口&#xff0c;main方法public static void main(String[] args){System.out.println("Hello world!");} } 运行结果 Hello world! java编写主程序常见错误&#xff1a; 1、System ---首字母没有…...

编程日记 2024/6/7 13:50:26

MySQL(四)查询

1、MySQL限性约束 —非空、唯一（自增）、主外键、检查（MySQL存在但是不能用）。 约束主要完成对数据的校验，保证数据库数据的完整性；如果有相互依赖数据，保证该数据不被删除。 1）常用五类约束 not null ：非空约束，指定某列不为空。 unique：唯一约束，指定某列和几列组…...

编程日记 2024/6/7 13:47:23

嵌入式学习——网络编程（TCP）——day31

1. TCP和UDP的区别 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09; UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09; 1.1 连接方式 TCP 是面向连接的协议&#xff0c;它在数据传输前需要通过三次握手建立…...

编程日记 2024/6/7 13:45:20

[STM32]定位器与PWM的LED控制

目录 1. 深入了解STM32定时器原理&#xff0c;掌握脉宽调制pwm生成方法。 (1)STM32定时器原理 原理概述 STM32定时器的常见模式 使用步骤 (2)脉宽调制pwm生成方法。 2. 实验 (1)LED亮灭 代码 测试效果 (2)呼吸灯 代码 测试效果 3.总结 1. 深入了解STM32定时器原…...

编程日记 2024/6/7 13:44:19

可视化数据科学平台在信贷领域应用系列五：零代码可视化建模

信贷风控模型是金融机构风险管理的核心工具&#xff0c;在信贷风险管理工作中扮演着至关重要的角色。随着信贷市场的环境不断变化&#xff0c;信贷业务的风险日趋复杂化和隐蔽化&#xff0c;开发和应用准确高效的信贷风控模型显得尤为重要。信贷风险控制面临着越来越大的挑战和…...

编程日记 2024/6/7 13:43:18

Windows 11广告植入“另辟蹊径”：PC Manager暗示若不使用必应搜索，你的系统可能需要“修复”

Edge浏览器近期增添了许多实用的新功能&#xff0c;如侧边栏、休眠标签页和沉浸式阅读器。话虽如此&#xff0c;浏览器中仍有一部分功能被部分用户视为“冗余软件”和不必要的累赘。 随着Windows 11用户逐渐习惯操作系统关键位置出现越来越多的广告&#xff0c;微软似乎正尝试以…...

编程日记 2024/6/7 13:42:17

一线教师教学工具汇总

亲爱的教师们&#xff01;我们的教学工具箱里也该更新换代啦&#xff01;今天&#xff0c;就让我来给大家安利一波超实用的教学神器&#xff1a; 百度文库小程序 —— 在线图书馆 百度文库&#xff0c;一个宝藏级的在线文档分享平台&#xff01;在这里&#xff0c;你可以找到海…...

编程日记 2024/6/7 13:39:14

【数据结构】栈和队列--＞理解和实现（赋源码)

Toc 欢迎光临我的Blog&#xff0c;喜欢就点歌关注吧♥ 前面介绍了顺序表、单链表、双向循环链表&#xff0c;基本上已经结束了链表的讲解&#xff0c;今天谈一下栈、队列。可以简单的说是前面学习的一特殊化实现&#xff0c;但是总体是相似的。 前言 栈是一种特殊的线性表&…...

编程日记 2024/6/7 13:36:11

一篇教会你CSS定位

前言&#xff1a;在网页布局的时候&#xff0c;我们需要将想要的元素放到指定的位置上&#xff0c;这个时候我们就可以使用CSS中的定位操作。 先让我们看一下本篇文章的大致内容&#xff1a; 目录 什么是定位 1.相对定位 2.绝对定位 3. 固定定位 4. 粘性定位 5. 定位层级…...

编程日记 2024/6/7 13:35:10

Hive的常规操作

Hive常规操作 hive常用交互命令 -e执行sql语句 [rootmaster ~]# hive -e "show databases";-f执行sql脚本 [rootmaster ~]# hive -f /usr/local/demo.sql查看hive中输入的所有命令 [rootmaster ~]# cat ~/.hivehistory操作库 创建库 语法&#xff1a; create…...

编程日记 2024/6/7 13:34:09

redis做为缓存，mysql的数据如何与redis进行同步呢？

让我们一步步来实现如何让MySQL数据库的数据和Redis缓存保持同步。想象一下&#xff0c;MySQL是一个大仓库&#xff0c;存放着所有重要的货物&#xff08;数据&#xff09;&#xff0c;而Redis则像是一个快速取货窗口&#xff0c;让你能更快拿到常用的东西。为了让两者保持一致…...

编程日记 2024/6/7 13:33:08

【Map】集合总结

一、Map 之前学习的Collection集合体系是单列集合,即一次存取一个元素 Map是双列集合,一次存取一对元素,这一对儿称为键值对,key-value,且key是映射到value 所谓键映射到值,是指只能通过键找到值,无法通过值找键 Map中键不能重复!值允许重复 Map中一个键,只能对应一个值 Ma…...

编程日记 2024/6/7 13:31:06

SpringBoot实现发送邮件功能

目录 一、开启邮件服务 二、导入pom依赖 三、配置yml文件 四、发送邮件 4.1、发送文字邮件 4.2、发送html邮件 4.3、发送附件邮件 4.4、发送图片邮件 一、开启邮件服务 这里拿QQ邮箱举例。 翻到下面进行开启，之后获取授权码。 二、导入pom依赖 <dependency><…...

编程日记 2024/6/7 13:30:04

外观数列 ---- 模拟

题目链接 题目: 分析: 题目的意思如下:所以我们需要引用双指针来找到连续的字符有几个, 并添加到答案中, 接着将此字符添加到答案中, 让left right , 继续向后遍历整个字符串, 重复上面的操作将答案重新赋给字符串, 继续重复上述操作, 应该重复n - 1 次, 因为n为1的时候, 直…...

编程日记 2024/6/7 13:28:03

上心师傅的思路分享(二)

Druid monitor 与Springboot常见报错界面渗透小技巧 目录 前言 1.Druid monitor介绍 2.Druid未授权(1rank) 3.druid弱口令 4.Druid进一步利用 4.1 URL监控 4.2 Session监控 利用思路 EditThisCookie(小饼干插件) 5.SpringBoot Actuator未授权访问漏洞 5.1 简介 5…...

编程日记 2024/6/7 13:26:01

116页 | 2024年中国金融行业网络安全研究报告（免费下载）

以上是资料简介和目录&#xff0c;如需下载&#xff0c;请前往星球获取&#xff01;&#xff01;&#xff01;...

编程日记 2024/6/7 13:25:01

基于fabric封装一个简单的图片编辑器(vue 篇)

介绍 前言vue demo版本react 版本 前言 对 fabric.js 进行二次封装&#xff0c;实现图片编辑器的核心功能。核心代码 不依赖 ui响应式框架vue ,react 都适用。 只写了核心编辑相关代码便于大家后续白嫖二次开发 核心代码我就没有打包发布 会 和 业务代码一起放到项目中。 vu…...

编程日记 2024/6/7 13:24:00

Linux中 .PHONY 和 all 在 Makefile 中的作用

1 .PHONY 和 all .PHONY 是 GNU make 工具中的一个特殊指令&#xff0c;用于指示某个目标是一个伪目标。伪目标并不对应于实际的文件&#xff0c;而是用来执行一系列命令的标识符。使用 .PHONY 的好处包括避免与现有文件同名造成的冲突&#xff0c;以及提高 make 的执行效率&am…...

编程日记 2024/6/7 13:21:58

Flutter 中的 FlexibleSpaceBar 小部件：全面指南

Flutter 中的 FlexibleSpaceBar 小部件&#xff1a;全面指南 Flutter 是一个由 Google 开发的跨平台 UI 框架&#xff0c;它提供了丰富的组件来帮助开发者构建高性能、美观的移动、Web 和桌面应用。在 Flutter 的组件库中&#xff0c;FlexibleSpaceBar 是一个与 SliverAppBar …...

编程日记 2024/6/7 13:20:57

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/9/9 21:22:34

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/9/2 16:59:56

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2025/8/17 16:33:04

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/1 17:51:59

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2025/9/7 19:10:42

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2025/9/7 8:52:25

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/9/2 22:30:49

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/9/2 18:15:10

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/9/5 8:29:07

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2025/9/1 23:34:37