js | 易学教程

原生js实现用户登陆验证

阅读更多关于原生js实现用户登陆验证

目的：我们要想实现利用正则实现用户登陆验证，正确则跳转到个人主页，错误则提示输入错误我们会想到用form表单来实现页面的跳转，但使用form表单就无法利用正则来判断输入的数据的正错，无论输入对错，都会跳转到action的页面所以我们选择利用原生js来实现我们想要的效果首先我们需要获取输入框的值：我们还是用到了from表单👵 先给form加个name属性，再给input加个name属性 <form name="form"> <input type="text" maxlength="11" name="input1"> </form> 然后用js获取输入的值 var x=document.forms["form"]["input1"].value; 然后利用正则判断输入的数据是否正确，通过onclick来触发函数。 var input1=document.getElementById("input1"); var Pattern1=/^1[3|4|5|7|8]\d{9}$/; input2.onclick=function(){ jiansuo(); } function jiansuo(){ var x=document.forms["form"]["input1"].value; if(Pattern1.test(x)){ alert("您将进入个人主页")

深入理解js的原型和闭包系列1

阅读更多关于深入理解js的原型和闭包系列1

原文链接： https://www.cnblogs.com/wangfupeng1988/p/3977924.html https://www.cnblogs.com/wangfupeng1988/p/3977924.html 对象——若干属性的集合。 ---------------------------------------------------------------重点要牢记------------------------------------------------------------- 要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”，要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”，要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”，要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”，要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”，要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”，要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”， 13.自由变量: 在A作用域中使用的变量x，却没有在A作用域中声明（即在其他作用域中声明的），对于A作用域来说，x就是一个自由变量; 要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”，

JS浏览器事件循环机制

阅读更多关于 JS浏览器事件循环机制

先来明白些概念性内容。进程、线程进程是系统分配的独立资源，是 CPU 资源分配的基本单位，进程是由一个或者多个线程组成的。线程是进程的执行流，是CPU调度和分派的基本单位，同个进程之中的多个线程之间是共享该进程的资源的。浏览器内核浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程（也不一定，因为多个空白 tab 标签会合并成一个进程），浏览器内核（浏览器渲染进程）属于浏览器多进程中的一种。浏览器内核有多种线程在工作。 GUI 渲染线程: 负责渲染页面，解析 HTML，CSS 构成 DOM 树等，当页面重绘或者由于某种操作引起回流都会调起该线程。和 JS 引擎线程是互斥的，当 JS 引擎线程在工作的时候，GUI 渲染线程会被挂起，GUI 更新被放入在 JS 任务队列中，等待 JS 引擎线程空闲的时候继续执行。 JS 引擎线程: 单线程工作，负责解析运行 JavaScript 脚本。和 GUI 渲染线程互斥，JS 运行耗时过长就会导致页面阻塞。事件触发线程: 当事件符合触发条件被触发时，该线程会把对应的事件回调函数添加到任务队列的队尾，等待 JS 引擎处理。定时器触发线程: 浏览器定时计数器并不是由 JS 引擎计数的，阻塞会导致计时不准确。开启定时器触发线程来计时并触发计时，计时完成后会被添加到任务队列中，等待 JS 引擎处理。 http 请求线程:

js时间戳转为日期格式

阅读更多关于 js时间戳转为日期格式

转自：http://wyoojune.blog.163.com/blog/static/57093325201131193650725/ 这个在php+mssql(日期类型为datetime)+ajax的时候才能用到，js需要把时间戳转为为普通格式，一般的情况下可能用不到 <script> function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' '); } alert(getLocalTime(1293072805)); </script> 弹出：2010年12月23日 10:53 也可以用： <script> function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17)} alert(getLocalTime(1293072805)); </script> 如果想弹出：2010-10-20 10:00:00这个格式的也好办 1 function formatDate(now) { 2 var year=now.getYear(); 3 var month=now.getMonth()+1; 4 var

Echarts——旭日图

阅读更多关于 Echarts——旭日图

旭日图旭日图（Sunburst）由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。引入相关文件旭日图是 ECharts 4.0 新增的图表类型，需要引入完整版的 echarts.min.js 最简单的旭日图创建旭日图需要在 series 配置项中声明类型为 ‘sunburst’ 的系列，并且以树形结构声明其 data： <!DOCTYPE HTML> < html > < head > < meta http-equiv = " Content-Type " content = " text/html; charset=UTF-8 " > < title > 最简单的旭日图 </ title > < script type = " text/javascript " src = " ../js/jquery-3.4.1.min.js " > </ script > < script type = " text/javascript " src = " ../js/echarts.min.js " > </ script > </ head > < body > < div id = " main " style =" width : 400px ; height : 300px ; " > </

JS中对象与字符串的互相转换

阅读更多关于 JS中对象与字符串的互相转换

在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候，碰到了问题： throw new SyntaxError('JSON.parse'); 查询资料，大概意思如下： JSON.parse方法在遇到不可解析的字符串时，会抛出SyntaxError异常。即：JSON.parse(text, reviver)，This method parses a JSON text to produce an object or array. t can throw a SyntaxError exception. 所以，在这里在此总结一下 JS 中对象与字符串的互相转换，因为这涉及到浏览器兼容问题。 1：jQuery插件支持的转换方式代码如下: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象反过来，使用 serialize 系列方法：如：var fields = $("select, :radio").serializeArray(); 2：浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器代码如下: JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify

JS 优雅指南 2

阅读更多关于 JS 优雅指南 2

1. 富有准确性的命名事实上，你完全可以使用 doSomeThing 代替所有的函数，毕竟它们真的只是提供某些微不足道的功能，但当你有了多个甚至是成百上千的函数时，这是一个灾难。这是一个浅显易懂的道理，即便是毫无经验的开发人员也会意识到命名爆炸的问题，他们隐约明白了什么是好的编程风格，但最后，甚至是大多数都止步于 doSomeThing 到 “优美” 的某一站上。例 1, 命名只需要有必要的词，除非有必要，否则不要堆砌 // bad const theBook = {} const _b = {} const bookObj = {} const newBook = {} // good const book = {} 例 2，可读的条件判断 // bad if (username && username.includes('prefix-')) {} // bad const prefix = username && username.includes('prefix-') // bad const availableName = username && username.includes('prefix-') // good const hasPrefixName = username && username.includes('prefix-') 例 3，可读的函数

js 字符串

阅读更多关于 js 字符串

string字符串传统方法创建一个字符串通过new var str = new string（“zfc”）字面量方法 var strTwo = “acdefg” 字符串中的方法 charAt()返回指定位置的字符 length字符串的长度 **charCodeAt()😗*返回指定位子的字符串的Unicode编码； **fromCharCode()：**接收一个UniCode编码返回对应的字符串 replace():替换 1.想替换那个字符串就可用那个字符来调用； 2.参数1是被替换的目标，参2是替换的新内容 3.会将替换的字符串整体返回。 **substring()😗*提起介于两个下标之间的字符串，包头不包尾参数1：开始下标，参数2：结束下标 **substr()😗*在字符串中从开始位置截取指定长度的字符串参数1：开始位置，参数2：指定长度 split() :用于把字符串分割成字符串数组（本质上就是一个数组，只是储存的都是字符串罢了）参数1：分割的依据，空格也算参数2：分割后返回的长度，可选（超出实际大小，按实际大小算，小于的话安装指定算，） slice()：方法可用于提取指定范围的字符串参数1：开始位置，参数2：结束位置，包头不包尾 indexOf(): 方法可返回指定字符的对应下标(首先出现的)；如若没有返回-1(去重) lastInsexOf():

高性能js-加载和执行

阅读更多关于高性能js-加载和执行

js会使网页速度变慢，可以从加载速度，执行效率，DOM 交互，网页生命周期方面优化语言特性，数据结构，浏览器机理，网络传输脚本加载 js的阻塞性: js加载和http请求，用户界面刷新等用的是同一进程，js加载会阻塞其他浏览器在解析到 <body 标签之前，不会渲染页面任何部分，把脚本放在<head 里会导致明显的延迟 <script 标签在加载外部资源时不会阻塞其他 <script ,但是仍会阻塞其他资源如图片的下载将<script 标签放在<body标签底部脚本组织 <script 标签初始加载时会阻塞页面渲染，所以要减少内嵌外链<script标签数量把内嵌脚本放在<link 外链样式表之后，会使得样式表先加载阻塞页面渲染，为了确保内嵌脚本在执行时能获得精确的样式信息。不要把内嵌脚本紧跟在<link 标签后 http请求会带来额外的性能开销，把多个文件合并成一个，只用一个<script标签，减少性能消耗文件合并可通过离线打包工具，雅虎合并处理器，以供通过内容传输网络CDN，分发YUI library文件时使用，任何网站都可以使用一个把指定文件合并处理后的URL来获取任意数量的YUI文件加粗样式来源： CSDN 作者：青空鸢约链接： https://blog.csdn.net/weixin_44496230/article/details/104117804

50道JavaScript经典题和解法(JS新手进...持续更新...)

阅读更多关于 50道JavaScript经典题和解法(JS新手进...持续更新...)

最近在学习《数据结构与算法JavaScript描述》这本书，对JavaScript的特性和数据结构都有了进一步的了解和体会。学习之余，也进行了相应的练习，题目难度不大，但是对所学知识的巩固十分有帮助，所以在这里和大家做一个分享。注：题目主要来源于牛客网 ,这是一个不错的网站，对于代码的学习和自我能力的检验很有帮助，有兴趣的朋友可以去看看。这些题目解法绝大多数是根据自己的思路做的，并且几乎都采用了多种方法，某些方法参考了网站中其他朋友的代码，如果有更好的解法也欢迎大家提出来，我会进行详细的补充。如果有明显的错误也求大家轻喷。首先是数组的部分，关于JavaScript中数组的操作在上一篇的博客" Javascipt操作数组 " 中做过比较详细的介绍，如果对下面的题目解法中的方法有所疑问的朋友可以去看看。 Talk is cheap,show me the code! 【数组】一、移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组。 // 方法一使用过滤器方法 function remove(arr, item) { return arr.filter(function(x){ return (x!=item); }) } // 方法二创建新数组，将删除指定元素后剩下的元素存入此数组并返回 function

订阅 js