江南时雨-CSDN博客

原创 node npm 配置淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

2021-09-06 22:30:16 225

2021-08-25 00:44:43 794

原创使用css制作永动的动画

animation-iteration-count 属性用来控制动画循环的次数。设置为 infinite 则使动画可以一直循环<style> #ball { width: 100px; height: 100px; margin: 50px auto; position: relative; border-radius: 50%; background: linear-gradient( 35deg, #ccfff

2021-08-25 00:37:06 1049

原创使用 @keyframes 来使鼠标悬停的改变图片大小

使用 @keyframes 来使鼠标悬停的改变图片大小<style> img:hover { animation-name: width; animation-duration: 500ms; } @keyframes width { 100% { width: 40px; } }</style><img src="https://bit.ly/smallgooglelogo"/>...

2021-08-25 00:20:45 442

原创利用css伪元素画一个爱心

爱心主要是由一个正方形经过rotate旋转，然后用::after伪元素和::before伪元素画一个圆形，最后调整它们的位置就可以画出一颗爱心<style> .heart { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: pink; height: 50px; width: 50px;

2021-08-24 23:57:26 210 1

原创使用css的box-shadow画一个月亮形状的图形

首先创建一个圆，然后设置它的box-shadow值。最后将圆的背景色编程transparent就行<style> .center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; background-color: transparent; border-r

2021-08-24 23:42:19 567

原创使用repeating-linear-gradient创建一个条纹卡片效果

使用repeating-linear-gradient创建一个条纹卡片效果只使用了角度值和色标<style> div{ border-radius: 20px; width: 70%; height: 400px; margin: 50 auto; background: repeating-linear-gradient( 45deg, // 角度值 yellow 0px, // 色标 yell...

2021-08-24 23:23:28 172

原创 Ajax函数封装

请求参数考虑的问题 1.请求参数位置的问题请求参数传递到Ajax函数内部，在函数内部按请求参数的不同将请求参数放置在不同的位置 get 放在请求地址的后面 post 放置在send方法中 2.请求参数格式的问题 application/x-ww

2021-07-13 18:15:14 513

原创随机生成验证码及校验

输入验证码（区分大小写）点击确认，进行校验。出错就弹框提示点击看不清重新随机生成验证码当验证码输入错误时进行提示<body> <div class="v_code"> <div class="code_show"> <span class="code" id="checkCode"></span> <a href="#" id="linkbt">看不清

2021-06-10 22:42:56 394

原创 JS 支付10秒倒计时

<body> <div> <p>商品：Web前端课程</p> <p>原价：1908元</p> <p>现价：1.98元</p> <p>内容；HTML、CSS、JS</p> <p>地址：北京朝阳区</p> <p> <butto

2021-06-10 21:04:44 404

原创 var和let以及const的区别

var和let以及const的区别一、var是ES6之前的变量声明方式，使用var声明的变量，其作用域为该语句所在的函数内，并且存在变量提升现象。由于变量提升的关系，我们可以看到在if语句里面，我们在 a赋值前将其输出并没有报错。还有就是我们在if语句外面再次输出a，居然可以正常输出。这和我们学习的其他语言感觉出现了冲突。于是ES6之后新增了新的变量声明方式。let <script> if (true) { console.log(a);

2021-04-22 23:44:03 193

原创 JS函数的定义和调用几种方式

一、函数的定义：函数的定义有三种方式：1、自定义函数（命名函数）；2、函数表达式（匿名函数）；3、利用 new Function(‘参数1’,‘参数2’,‘函数体’);还有就是所有的函数都是 Function的实例（对象） <script> // 1. 自定义函数（命名函数） function fn() {}; // 2.函数表达式（匿名函数） var fun = function() {}; //

2021-04-05 22:10:49 3381

原创利用insertBefore方法和appendChild方法实现一个insertAfter函数

我们知道DOM API中有inserBefore和appendChild方法，但是好像并没有insertAfter方法（将一个结点插入另一个节点的后面）。其实也insertAfter也不是很有必要，我们也可以利用inserBefore和appendChild自己写一个insertAfter函数。一、insertBefore的用法：该Node.insertBefore()方法在参考节点之前插入一个节点，作为指定父节点的子节点。let insertedNode = parentNode.insertBef

2021-03-23 12:11:05 2526

原创 JS计算超过范围的两个大整数相加功能

JavaScript能表示的最大安全整数是9007199254740991，如果超过范围直接计算就会发生精度丢失的情况。我们就只有将两个数字每一位相加，将最后的结果保存在一个字符串中<script> function bigNumberAdd(number1, number2) { var result = '', // 保存最后的结果 carry = 0; // 保留进位结果 // 将字符.

2021-03-22 00:15:45 1088

原创 JS按位非(~) 运算符与~~运算符的一些用法

~ 是JavaScript中的操作符，按位非，~~经常用来进行取整和类型转换。因为位运算的操作值要求是整数，其结果也是整数，所以经过位运算的都会自动变成整数。这个方法可以在一些特殊的情况使用比较方便一、~~ 将字符串转换为整型： var str = '11111111'; console.log(typeof(str)); console.log(typeof(~~str));成功将字符串转换为了数字二、使用 ~~ 去掉一个数的小数部分：这个方法与Ma.

2021-03-22 00:00:13 561

转载对web标准、可⽤性、可访问性的理解

1、可⽤性（Usability）：产品是否容易上⼿，⽤户能否完成任务，效率如何，以及这过程中⽤户的主观感受可好，是从⽤户的⻆度来看产品的质量。可⽤性好意味着产品质量⾼，是企业的核⼼竞争⼒2、可访问性（Accessibility）：Web内容对于残障⽤户的可阅读和可理解性3、可维护性（Maintainability）：⼀般包含两个层次，⼀是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。⼆是代码是否容易被⼈理解，是否容易修改和增强功能...

2021-03-21 19:05:36 109

原创 web本地存储之localStorage、sessionStorage

一、本地存储的特性：1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不会丢失数据3、容量较大，sessionStorage约5M、localStorage约20M4、只能存储字符串，可以将对象JSON.stringify() 编码后存储二、window.localStorage 和 window.sessionStorage的区别:1.相同点：获取数据（.getItem(key, value)）、存储数据（.setItem(key)）、删除数据（.removeItem(key)

2021-03-15 19:45:13 147

原创 JS轮播图

JS轮播图轮播图的结构：左右按钮、中间滚动的图片用li装着、表示图片滚动的小圆点<div class="focus fl">  <a href="javascript:;" class="arrow_l"></a>  <a href="javascript

2021-03-12 23:53:06 101

原创一个简单的缓动动画函数

一个简单的缓动动画函数缓动动画的思路：1.让盒子每次移动的距离慢慢变小，速度就会慢慢降下来；2.核心算法：（目标值-现在的位置）/10 ，作为每次移动的距离步长；3.停止的条件是: 让当前盒子位置等于目标位置时就停止定时器。还有一个关键就是可能每次计算的步长会出现小数的情况，导致移动的位置距离预计距离有一点差距。所以要把步长值修改为整数如果步长大于0（移动反向向正方向）就向上取整，如果小于零（移动反向向负方向）就向下取整。使用三元表达式比较简洁// 把步长值改为整数不要出现小数的问题

2021-03-10 21:41:51 268

原创 TCP三次握手和TCP四次挥手

TCP三次握手和TCP四次挥手文章目录前言一、TCP三次握手：二、TCP四次挥手：总结前言以前经常听见TCP三次握手和TCP四次挥手，但是自己都没有具体的了解过它们的过程。这次终于了解一些了，所以就记录一下把。一、TCP三次握手：当两台主机要进行相互通信时。要确保双方通信的正常，所以要确认两台主机都具备收和发的功能。其实三次握手就是主机A和B之间发了三条消息一、首先主机A需要确认主机B既可以收又可以发，于是给主机B发送一条请求通信的消息即第一次握手。第一次握手主要传递两个信息：

2021-03-09 13:30:40 110 1

原创商品放大镜案例

商品放大镜案例当鼠标放在旁边的小商品图片上时可以看到一个相同商品的大图一、实现效果：二、步骤：一、当鼠标经过 preview_img 就是显示和隐藏 mask遮挡层和big大盒子（1）.分为鼠标经过（mouseover）和鼠标离开事件（mouseout）二、鼠标移动的时候，让黄色的盒子跟随鼠标移动（1）.计算鼠标在盒子内部的坐标 &nbs

2021-03-08 23:51:58 146

原创 js立即执行函数

js立即执行函数一、书写形式：1、(function() {})() 2、(function() {}())二、用法：立即执行函数的第二个小括号里可以看作是调用函数，里面可以传递参数 <script> // 1.立即执行函数：不需要调用，立马能够自己执行的函数 function fn() { console.log(1); } fn(); //普通函数需要调用 // 2.写法

2021-03-08 21:57:18 241

原创 JS执行机制

JS执行机制 <script> console.log(1); document.onclick = function() { console.log('我点击了'); } console.log(2); setTimeout(function() { console.log(3); }, 3000) </script>我们想要

2021-03-06 16:53:55 64

原创 js中this指向问题

js中this指向问题this指向问题：一般情况下this的最终指向的是那个调用它的对象<body> <button>点击</button> <script> // this 指向问题一般情况下this的最终指向的是那个调用它的对象 //1.全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window） console.log(this); //全

2021-03-06 14:32:00 72

原创倒计时效果

倒计时效果这是我在b站视频上学到的一个倒计时效果1、定时器 window.setInterval(调用函数，延时时间)的使用：（1）、window可以省略（2）、每隔延时时间就会去重复调用这个函数一个要注意的地方：当我们正常完成这个功能后，当每次刷新页面时，倒计时框里会出现我们最开始在盒子里初始化的 1 2 3.解决方法是我们在开启倒计时前先调用一次这个函数，防止第一次刷新时页面有空白<body> <div> <span class="

2021-03-06 11:29:48 145

原创输入框放大的例子

输入框放大的例子b站上看到的一个例子，类似于京东快递单号查询单号 <style> * { margin: 0; padding: 0; } .search { position: relative; width: 178px; margin: 100px; }

2021-03-05 23:53:07 170

原创 JS中事件委托或事件代理

JS中事件委托或事件代理1、事件委托的原理：不是每个子结点单独设置事件监听器，而是事件监听器设置在其父结点上，然后利用冒泡原理影响设置每个子节点。2、不使用事件委托的写法，需要进行大量的dom操作，影响程序的性能。<body> <ul> <li>我是一个li</li> <li>我是一个li</li> <li>我是一个li</li> &

2021-03-05 11:25:42 248

原创阻止事件冒泡以及兼容性写法

阻止事件冒泡以及兼容性写法阻止冒泡：1、dom 推荐 stopPropagation()阻止捕获和冒泡阶段中当前事件的进一步传播。但是，它不能防止任何默认行为的发生；例如，对链接的点击仍会被处理。不适用于 ie 6 7 8 .2、cancelBubble：Event.cancelBubble 属性是 Event.stopPropagation()的一个曾用名。在从事件处理程序返回之前将其值设置为true可阻止事件的传播。适用于 ie 6 7 8<body> <di

2021-03-05 10:17:31 596 1

原创 DOM三种动态创建元素区别

DOM三种动态创建元素区别看网上视频学习了 DOM三种动态创建元素区别：1.document.write()2.element.innerHTML3.document.createElement()提前总结：1、document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则会导致页面全部重绘2、innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘3.innerHTML 创建多个元素效率更高（不要拼接字符串，采用数组形式拼接），结构稍微复杂4、docu

2021-03-04 21:15:39 158 3

原创 nextSibling和nextElementSilbing使用以及解决兼容性问题

nextSibling和nextElementSilbing使用以及解决兼容性问题1、今天学习了获取兄弟节点的方法 – nextSibling（获取下一个兄弟节点）、previousSibling(获取上一个兄弟节点)Node.nextSibling 是一个只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。<body> <div>啦啦啦</div> <div>我是

2021-03-03 23:45:23 1396 1

原创自定义属性

自定义属性自定义属性的目的：为了保存并使用数据，有些数据可以保存到数据库中1、自定义属性的获取是通过 getAttribute(‘属性’) 获取；getAttribute()但是有的自定义属性很容易引起歧义，不容易判断是元素内置属性还是自定义属性；如果直接调用自定义属性会有问题显示undefined<body> <div getTime="20"></div> <script> var div = docume

2021-03-02 23:52:29 3663

原创 tab栏切换的小例子

tab栏切换的小例子初学JS&API跟着视频做了一个 tab 栏切换的案例思路：1、tab切换点击上面的选项卡底色会变成红色，其余不变（利用排他思想—核心是先干掉其他人，然后留下我自己）----这里可以使用修改类名的方式2、当点击上面的选项卡后下面的内容会随之变化，下面要写到点击事件里3、上面的选项与下面的内容一一对应，可以给上面的每一个选项添加自定义的属性，属性值从0开始，与for循环里的 i 值相对应更加方便~~<!DOCTYPE html><html l

2021-03-02 23:16:01 479

原创一个全选和取消全选的例子

一个全选和取消全选的例子初学跟着网上视频做了一个全选和取消全选的例子1.一个大的盒子里面放一个表格装有一些数据还有复选框 checkbox2.先获取表格标题复选框和表格数据部分复选框元素3. 先完成勾选表头的复选框实现全选的功能—利用for循环将表头复选框的状态赋给下面每个复选框， " this.checked " 可以得到当前复选框的状态返回值为 true 或者 false4. 下一步实现如果勾选后表格数据部分没有被全部选中则取消表头的全选，还是利用for 循环，

2021-03-02 13:37:39 238

原创一个关闭二维码的例子

一个关闭二维码的例子初学js现在才开始学js 记录一下<!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-scal

2021-03-01 00:19:07 218

原创一个隐藏密码的小例子

一个隐藏密码的小例子学了一点基础js 照着写了一个隐藏密码的例子~~~<!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, initi

2021-02-28 20:08:37 107

原创简单的事件处理

简单的事件处理事件由三部分组成：事件源、事件类型、事件处理程序执行事件步骤：1.获取事件源----------------------2.绑定事件注册事件----------------------3.添加事件处理程序（采取函数赋值的形式） // 执行事件步骤 // 点击 div 控制台输出 // 1.获取事件源 var div = document.querySelector('div'); //2.绑定事件注册事件

2021-02-28 10:38:49 290

原创 HTML

HTML——一些标签通过网上自学前端一段时间了，但是感觉知识不是很牢固。有很多东西学了之后印象不深。现在打算写一些，记录一下。web标准的三层结构：结构，表现，行为结构：用于对网页元素进行整理和分类，主要学习HTML表现：用于设置网页元素的版式、颜色、大小等外观样式，主要学习CSS行为：指网页模型的定义与交互的编写，主要学习Javascript什么是HTML：HTML 是一种超文本标记语言（Hyper Text Markup Language），它是一种标记语言不同于编程语言。HTML是一

2021-02-28 00:27:32 355

原创 2020-12-17

用Java身份证验证Java小白，，，这是我们Java实验课要求写的验证身份证的代码，有什么错误也请大佬提出来哈。身份证号码验证及个人信息输出。在网页、管理信息系统中，我们经常会要求用户输入身份证号码，由于身份证号码较长，经常容易产生录入错误，本验证可以有效防止用户录用错误。其实身份证中还包含了用户的个人信息，包含出生地、生日、性别的等内容。如：51 01 03 19XX 01 03 028 X为：省市区出生年月日顺序码校验码1、身份证验证主要包含：○1 位数错误：正确应该为

2020-12-17 21:20:53 209

原创 java建立一个小小留言板

java建立一个小小留言板制作如图一个留言板的界面，并按要求加入所需控件，并能按要求进行窗口控件的布局。并按要求为按钮、文本框、窗口添加事件，使之实现提交显示留言，清屏，留言至顶和至尾。要求文本框能自动产生滚动条，界面美观。16注意：1、通过两个文本文件存储表情和留言内容。1）Expression.dat：用于存储表情，如：微笑、大哭、流泪等；每个表情占一行。2）Msg.dat：用于存储留言信息，留言信息格式为：[2019-10-04 12:35] 你微笑地说：今天下午去图书馆吗？其中：

2020-12-17 21:12:57 4544 7

空空如也

空空如也