JavaScript

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量326 收藏 8
点赞数 8
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73418952/article/details/134913427
版权

单击事件的案例

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

 </head>

 <body>

  <button>开始点名</button>

  

  

  <script>

   //需求如下:点击按钮 来回展示开始点名或停止点名

   //思路:获取到button标签,然后给它赋予一个点击事件.

   //接着判断button标签内部的value值.根据值来进行判断.进而修改/

   

   var btn = document.getElementsByTagName("button")[0];

   

   

   btn.onclick = function(){

    //获取button的文本值.

    var text = btn.innerText ; 

    if(text=="开始点名"){

     btn.innerText = "停止点名"

    }else{

     btn.innerText = "开始点名";

    }

   }

   

   

  </script>

 </body>

 

</html>

双击事件的案例

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

  <style>

   div{

    width: 230px;

    height: 230px;

    text-align: center;

    border : 1px solid black;

    display: none;

   }

  </style>

  

 </head>

 <body>

  <button>双击打开登录页面</button>

  

  <div>

   <h3>登录弹窗！！</h3>

   账号<input type="text" placeholder="请输入你的账号" /> <br>

   密码<input type="password" placeholder="请输入你的密码" /> <br><br><br>

   <button>登录</button> <button>返回</button>

  </div>

  

 

  <script>

   

   //思考:浏览器中的弹窗为啥那么好看

   //但是我们学习的三个弹窗 一个比一个丑 

   //其实浏览器的弹窗 并不是真正的弹窗.

   //思路: 就是一个提前绘制好的一个div页面.然后将其隐藏. 当用户触发的时候就蹦出来.实现一个弹窗的效果.

   

   

   //需求:双击打开登录页面

   document.getElementsByTagName("button")[0].ondblclick = function(){

    document.getElementsByTagName("div")[0].style.display = "block";

    

   }

   

   document.getElementsByTagName("button")[2].onclick = function(){

    document.getElementsByTagName("div")[0].style.display = "none";

   }

  </script>

  

 </body>

</html>

鼠标移入移除事件

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

  <style>

   .a{

    width: 200px;

    height: 200px;

   }

   .b{

    width: 400px;

    height: 400px;

   }

   

   

  </style>

 </head>

 <body>

  

  <img class="a" src="img/1.PNG"> 

  

  <script>

   //需求 鼠标移入图片内部 ,图片放大 鼠标移出图片 图片还原 

   var img = document.getElementsByTagName("img")[0];

   

   img.onmouseover = function(){

     // img.style.width = "400px";

     // img.style.height = "400px";

     img.className = "b";

   }

   

   img.onmouseout = function(){

     // img.style.width = "200px";

     // img.style.height = "200px";

     img.className = "a";

   }

   

  </script>

  

 </body>

</html>

演示键盘输入事件

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

 </head>

 <body>

  小写字母：<input type="text" id="a" /> <br>

  大写字母：<input type="text" id="b" />

  

  <script>

   //在第一个文本框输入小写字母.下面的文本框默认输出上面的与之对应的大写字母

   

   //思路:给第一个文本框加上键盘输入事件（每敲击一下键盘就触发一下事件）.

   //获取第一个文本框的值.然后赋予给第二个文本框

   

   var i1 = document.getElementById("a");

   var i2 = document.getElementById("b");

   i1.onkeyup = function(){

    i2.value = i1.value.toUpperCase();

   }

   

  </script>

  

 </body>

</html>

演示获取焦点和失去焦点事件

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

 </head>

 <body>

  账号：<input type="text" id="a" /> <span id="c"></span> <br>

  

  <script>

   var username = document.getElementById("a");

   var password = document.getElementById("a");

   var tip1 = document.getElementById("c");

   var tip2 = document.getElementById("d");

   

   //需求:输入账号之后.提示账号输入规则.

   //思路给文本框加上获取焦点事件 给第一个span标签生产一个提示用于

   username.onfocus = function(){

    tip1.innerText = "账号的长度要在6-10之间";

    tip1.style.color = "red";

   }

   

   //需求2:输入完成之后,要判断账号是否符合格式.

   //思路:失去焦点之后判断.

   username.onblur = function(){

    var username123 = username.value; 

    if (username123.length >=6 && username123.length<=10) {

     tip1.innerText = "√";

     tip1.style.color = "green";

    } else{

     tip1.innerText = "X";

     tip1.style.color = "red";

    }

   }

   

   

  </script>

  

 </body>

</html>

复习表单

表单：form

应用场景： 用户登录、 用户注册 添加一个商品信息

            

凡是需要将多个数据打包发送的 都可以使用表单。

            

form表单三大属性:

            

A.action表示将表单提交给谁。一般放一个URL地址 其中#表示不提交

B.method表示表单的提交方式：只有2个选择、1.get 2.post 默认是get。

            

            

区别如下：

get的速度快。因为只能携带极少的数据。 不安全，会将表单数据全部显示在url地址。是客户端行为（只依赖浏览器）

                

post的速度慢：因为可以携带理论上无限大的数据。安全。不会将表单数据全部显示在url地址。是服务端行为（依赖服务器）

            

C.enctype：表示该表单是什么类型的表单。

默认值1： application/x-www-form-urlencoded 表示普通表单 所以：绝大部分表单都可以不用加。

可选值2： multipart/form-data 表示文件上传的表单。如果需要文件上传就只能用这个。

可选值3： text/plain 表示大文本类型 常用于国家化传输邮件。

            

            

如何将表单打包发送给action的路径：

通过提交按钮：以下三种方式 均可。 一般使用第三种。

1 <button>提交（登录）</button> 

2 <button type="submit">登录提交</button>

3 <input type="submit" value="登录提交" />

            

后台如何获取表单内部的数据。

只需要在表单内部的标签元素中 添加name属性即可。（必须要加的，否则获取不到值）后台只需要根据name来取值。

 

串讲：button标签的易错事项。

            

button标签的完整写法：

<button type="xxx">按钮</button>

其中type的取值有3个：

1.submit 默认值 表示提交按钮

2.button 可选择 表示普通的按钮

3.reset 可选择 表示重置按钮

            

button标签中type属性的默认值是 submit 如果该标签放在form表单则会提交表单。

但是如果没在，就是一个普通的按钮

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

 </head>

 <body>

  <form action="#" method="post" enctype="text/plain" >

   账号：<input type="text" id="a" name="username" /> <br>

   密码：<input type="password" id="b" name="password" /> <br>

   <input type="submit" value="登录提交" />

  </form>

  

 </body>

</html>

演示表单提交事件

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

 </head>

 <body>

  <form id="f" action="#" method="post">

   账号：<input type="text" id="a" /> <span id="c"></span> <br>

   密码：<input type="password" id="b" /> <span id="d"></span> <br>

   <input type="submit" value="登录" />

  </form>

  <script>

   var username = document.getElementById("a");

   var password = document.getElementById("b");

   var tip1 = document.getElementById("c");

   var tip2 = document.getElementById("d");

   var f = document.getElementById("f");

   

   

   //需求:输入账号之后.提示账号输入规则.

   //思路给文本框加上获取焦点事件 给第一个span标签生产一个提示用于

   username.onfocus = function(){

    tip1.innerText = "账号的长度要在6-10之间";

    tip1.style.color = "red";

   }

   

   //需求2:输入完成之后,要判断账号是否符合格式.

   //思路:失去焦点之后判断.

   username.onblur = function(){

    var username123 = username.value; 

    if (username123.length >=6 && username123.length<=10) {

     tip1.innerText = "√";

     tip1.style.color = "green";

    } else{

     tip1.innerText = "X";

     tip1.style.color = "red";

    }

   }

   

   password.onfocus = function(){

    tip2.innerText = "密码的长度要在6-10之间";

    tip2.style.color = "red";

   }

   

   //需求2:输入完成之后,要判断账号是否符合格式.

   //思路:失去焦点之后判断.

   password.onblur = function(){

    var password123 = password.value; 

    if (password123.length >=6 && password123.length<=10) {

     tip2.innerText = "√";

     tip2.style.color = "green";

    } else{

     tip2.innerText = "X";

     tip2.style.color = "red";

    }

   }

   

   

   

   //onsubmit和其他的事件有个不同之处. 需要返回值的默认是return true表示提交 return false就表示不提交

   f.onsubmit = function(){

    

    if(tip1.innerText=="√" && tip2.innerText=="√" ){

     return true;

    }else{

     alert("请按照要求写");

     return false;

    }

   }

   

   

  </script>

  

 </body>

</html>

下拉菜单事件

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

 </head>

 <body>

  <select id="a">

   <option>中国银行</option>

   <option>建设银行</option>

   <option>交通银行</option>

  </select>

  

  <select id="b">

   <option>中国银行卡号111</option>

   <option>建设银行卡号222</option>

   <option>交通银行卡号333</option>

  </select>

  

  <script>

   // onchange事件: 一般只会作用于下拉框 点击下拉框且改变值.

   //适用场景: 银行卡的互动. 地址栏的联动

   

   var a = document.getElementById("a");

   var b = document.getElementById("b");

   

   

   //需求实现两个下拉框的联动效果.

   //思路:给第一个下拉框加上一个onchange事件

   //思路:获取第一个下拉框的第几个元素(下标)

   //思路:将上一步的思路的下标 赋予给第二个下拉框即可

   a.οnchange= function(){

    // 如何获取下拉框的下标

    // console.log(a.selectedIndex);

    b.selectedIndex = a.selectedIndex;

   }

   

   b.οnchange= function(){

    // 如何获取下拉框的下标

    // console.log(a.selectedIndex);

    a.selectedIndex = b.selectedIndex;

   }

  </script>

  

  

 </body>

</html>

修改元素的属性

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

 </head>

 <body>

  <img src="img/1.PNG" />

  <button>替换图片</button>

  

  <script>

   //html元素是有很多属性的.

   //例如 id class name src href   

   

   document.getElementsByTagName("button")[0].onclick = function(){

    //将xxx元素的aaa属性改成bbb

    //xxx.setAttribute("aaa","bbb");

    

    //var a = xxx.getAttribute("aaa");表示xxx的aaa属性的值

    

    // document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");

    

    

    if(document.getElementsByTagName("img")[0].getAttribute("src") == "img/1.PNG" ){

     document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");

    }else{

     document.getElementsByTagName("img")[0].setAttribute("src","img/1.PNG");

    }

   }

  </script>

 </body>

</html>

简化版的轮播图

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

  <style>

   img{

    width: 100px;

    height: 100px;

   }

  </style>

  

 </head>

 <body>

  <img src="img/1.PNG" />

  <script>

   //只要有需求: 每隔一段事件就要作什么事 就需要联想到使用定时器

   

   var img = document.getElementsByTagName("img")[0];

   //实现图片的替换 但是图片的文件名可能不是有规律.

   //所以可以将图片的所有文件名路径名 存到数组中. 数组是有规律的.

   var src_1 = ["img/1.PNG","img/2.PNG","img/3.PNG","img/4.PNG"];

   

   var index = 1;

   setInterval(function(){

    

    img.setAttribute("src",src_1[index]);

    index++;

    if(index==4){

     index = 0;

    }

   },1000);

  </script>

 </body>

</html>

 

 

 

m0_73418952
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 取随机数
互关互助互赞，共同进步
11-14 1万+
Math.rndSeed = parseInt (Date.parse (new Date ()).toString ()); Math.置随机数种子 = function 置随机数种子 (参_欲置入的种子数值) { 参_欲置入的种子数值 = 参_欲置入的种子数值 || (参_欲置入的种子数值 === 0 ? 0 : parseInt (Date.parse (new Date ()).toString ())); this.rndSeed = 参_欲置入的种子数值; return ...
javaScript
07-11
javascript课堂案例,里面包含了最基本的知识,案例,都试验过的
22 JavaScript学习：表单验证
热门推荐
百锦再的博客
04-30 8万+
JavaScript 表单验证是一种常用的前端技术，可以通过编写 JavaScript 脚本来对用户在表单中输入的数据进行验证，确保其格式和内容符合要求。但需要注意，前端验证只能作为一种辅助手段，真正的数据验证应该在后端进行，以确保数据的安全性和可靠性。其原理是在用户提交表单时，触发 JavaScript 函数进行对用户输入数据的验证，以确保其格式和内容符合预期。HTML5引入了一些新的表单输入类型和属性，可以在不编写JavaScript的情况下自动验证用户输入。最好根据具体需求和业务场景进行调整和优化。
JavaScript 教程
走向CTO的路上...
04-05 1436
同时，JavaScript 也成为了全栈开发的一部分，通过 Node.js 可以在服务器端使用 JavaScript 进行开发，实现前后端一体化的应用。：WebAssembly 是一种可以在浏览器中运行高性能编译语言的标准，它可以提供比 JavaScript 更快的执行速度，为 Web 开发带来更多的可能性。继续学习和保持与 JavaScript 生态系统的接轨是非常重要的，因为JavaScript 的发展速度非常快，新的框架、库和工具不断涌现。JavaScript 在未来的发展中有着广阔的前景。
JavaScript事件基础
JiuMeilove的博客
04-28 2万+
JavaScript事件概述 JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测道德行为 简单的理解为:触发—响应机制 网页中国每个元素都可以产生某些可以触发JavaScript的事件,例如我们可以在用户点击某个按钮时产生一个事件然后去执行某些操作 JavaScript事件的三要素 JavaScript事件又三分部组成 事件源 被触发的对象 事件类型__如何触发/什么事件 事件处理器__通过一个函数赋值的方式完成 <body> <butto
JavaScript原型链
qq_37464878的博客
11-19 5947
1.原型链 1.1 原型链解释： (概念) 原型链指一些原型通过__proto__指针构成的链表，一个原型链可以为想共享原型链中数据的对象服务，用于实现JavaScript中的继承机制。 (原型链指针) 原型链中涉及到的指针： 每个对象都有一个__proto__指针来访问对象的原型 每个原型都是一个用于实现继承的对象，除了有__proto__指针之外，还有constructor指针指向构造函数 每个函数都是一个对象，除了有__proto__指针之外，还有prototype指针指向与之关联的原型对象
JavaScript 注释
weixin_46121540的博客
01-31 1142
JavaScript 注释
【日常学习】最全JavaScript使用详解
九离的博客
03-30 2701
JavaScript使用 1、JavaScript历史 Netscape 发明了 JavaScript ​ JavaScript由Netscape 在1995年发明。早期的主要目的是处理一些用户的输入验证操作。而在JavaScript语言出现之前客户端的页面时需要提交到服务器端，由服务器去检测的。在刚刚普及的电话线调制解调器时代，对用户是一种考验，著名的Netscape Navigator（早期浏览器） 通过引入JavaScript来解决该问题 ​ 随着互联网的流行，网页已经不断变得更大和复杂，如果用户想
JavaScript概述
qq_43785075的博客
12-07 1226
JavaScrit概述 JavaScript语言作为目前流行的脚本语言，与HTML5密不可分。HTML5中的核心功能基本都需要JavaScript语言的支持。 1.JavaScript简介 JavaScript作为一种可以给网页增加交互性的脚本语言，拥有近二十年的发展历史。 1.1JavaScript是什么 JavaScript是一种动态、弱类型、基于原型的语言，内置支持类。 JavaScript不仅是一种健壮的、基于对象和事件驱动、并具有相对安全性的客户端脚本语言，同时也是一种广泛用于客户端Web开发的脚
JavaScript之javascript概述
熊凯瑞的博客
04-02 2103
一、初识JavaScript 1、JavaScript是什么 javascript是一种运行在客户端的脚本语言（Script是脚本的意思）。 脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行。 现在也可以基于Node.js技术进行服务器端编程。 2、JavaScript的作用 表单动态校验（密码强度检测）（JS产生最初的目的） 网页特效 服务器端开发（Node.js） 桌面程序（Electron） App（Cordova） 控制硬件-物联网（Ruff） 游戏开发（cocos2d-
JavaScript 中求阶乘
m0_54829066的博客
12-22 2777
在 JavaScript 中求阶乘，可以使用递归函数来实现。最后，所有这些递归调用将返回他们的结果，并且最终结果是。语句，当传递给函数的参数。在上面的代码中，我们调用了。例如，可以定义一个名为。的函数，其中包含一个。，这就是阶乘的结果。
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
JavaScript基础
10-22
JavaScript基础
JavaScript.docx
10-27
"JavaScript 基础知识" JavaScript 是一门广泛应用于 Web 开发的编程语言，所有现代的 HTML 页面都可以使用 JavaScript。它非常容易学，本教程将教会您从初级到高级的 JavaScript 知识。 JavaScript 简介 ...
JavaScript-Cryptography
05-29
JavaScript-密码学 JavaScript，通常缩写为 JS，是一种符合 ECMAScript 规范的编程语言。 JavaScript 是高级别的，通常是即时编译的，并且是多范式的。 它具有花括号语法、动态类型、基于原型的面向对象和一流的功能
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 441
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 507
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 214
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
Electron学习与总结
song854601134的博客
08-12 201
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
日本JavaScript函数教学课件详解：背景色与样式控制
本教学课件是关于日语版的JavaScript编程语言，专注于讲解函数这一核心概念。课程内容包括以下几个部分： 1. **函数基础**: - 函数定义：讲解了如何在JavaScript中使用`function`关键字来创建一个名为`f`的函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值