JavaScript
文章平均质量分 79
JavaScript语言,现在我用的最熟悉的语言
空城机
光阴雕琢生命,岁月磨砺人生
成为一个普通的上班族
展开
-
前端面试中有趣的题目(一)
题目一a == 1 && a == 2 && a == 3 是否能够返回true解析:这是可以实现的① 在JavaScript当中,有一个隐式转换的概念特别是本题中使用的是 == ,而不是 === 全等当进行双等号比较时候: 先检查两个操作数数据类型,如果相同, 则进行=比较, 如果不同, 则愿意为你进行一次类型转换, 转换成相同类型后再进行比较, 而=比较时, 如果类型不同,直接就是false==的类型转换操作空间很大比如:[1,2,3] == '1,原创 2021-06-22 08:41:44 · 503 阅读 · 68 评论 -
浏览器上有趣的Console命令都了解吗?
序作为用过JavaScript的各位来说,一定都知道使用console.log输出信息吧 (不知道也没关系 )不过对于console,各位都了解全了吗?上手操作按下F12键,就会出现浏览器上控制台了,如下图这里我使用的是Chrome浏览器,不同浏览器控制台可能会有所不同接下来让我们使用一下console.log打印一下信息,看看效果111被直接打印了出来,arr因为未定义,所以报错了console命令console的命令有很多,并不局限于我们常用的log日志命令MDN参原创 2021-06-03 08:33:18 · 2409 阅读 · 237 评论 -
想要做网页游戏怎么办 ?PixiJs 篇(二)
序继上一次的想要做网页游戏怎么办 ?PixiJs 篇(一)后,这次继续更新一下这次的文章之前有说关于pixi是什么以及基本的使用方法,这一次是关于我们创建出来的精灵对象运动状态的说明就是如何让你的精灵在不断运动,成为一个动画精灵参考文章(写的很不错,比较明了):https://blog.csdn.net/FE_dev/article/details/86141145https://blog.csdn.net/FE_dev/article/details/86483753提前看看效果正.原创 2021-04-22 00:16:46 · 638 阅读 · 0 评论 -
想要做网页游戏怎么办 ?PixiJs 篇(一)
序作为一个不太正经的前端开发人员,为了生存一定得想办法提升自己的能力呀!!!想学习一些与前端能搭的上边的新知识,想做一个能在 web 上运行的小游戏练练手︿( ̄︶ ̄)︿,就算不提高能力也得提高自己的眼界吧,虽然技术饭可能吃不到老,开发人的痛 o(╥﹏╥)o时代变了实际上空城机(本人,下文中可能也会这样称呼)之前就已经在学习与之相关的一些知识了。当前如果想要在 web 端网页上做一些小游戏,现在基本上也就是 HTML 游戏了吧,毕竟 flash 已经在逐步退出了,时代变了。在当初网页上面很多小游戏都.原创 2021-04-18 14:39:01 · 1644 阅读 · 2 评论 -
模拟jQuery封装一个$方法
在前端的学习过程中,经常会使用到jQuery这个已经封装好的JavaScript库。jQuery库的简便性就不用多说了,能够极大的简化我们对JavaScript的操作。而在jQuery中,经常能够碰到一个 $, $是jQuery的核心选择器,由$获取到需要修改的元素,然后对元素进行一系列方法操作。那么就尝试写一个简单的 $方法来模拟jQuery的 $,来个狸猫换太子试试看吧First可以编写一个js文件,使用export来导出定义的$方法const $ = function (val) {原创 2021-04-06 10:13:42 · 509 阅读 · 0 评论 -
JavaScript 图片转文字,文字转语音
图片转音频图片转文字 Tesseract.js```Tesseract.js```地址图片转文字 Tesseract.jsTesseract.js是流行的Tesseract OCR引擎的纯Javascript端口。这个库支持100多种语言,自动文本定位和脚本检测,一个简单的界面,用于阅读段落、单词和字符边界框。Tesseract.js既可以在浏览器中运行,也可以在带有NodeJS的服务器上运行。Tesseract.js地址Tesseract.js官网Tesseract.js Github地原创 2021-03-09 16:02:05 · 2866 阅读 · 9 评论 -
npm发布自己的组件
作为一个前端打工人,可以尝试自己编写一些UI组件。编写组件虽说不一定要使用,但也可以更好的提升自己的能力,在编写的过程中让自己思考变得更加全面组件编写好之后肯定不能以后调用时就复制文件夹过去,这样太low了。前端人员可以将组件发布到npm上,以后就可以npm install下载自己的组件npm发布流程一、创建npm账号npm官网:npm官网注册npm的账号非常简单,只需要一个邮箱即可,连手机都不需要二、创建自己的组件我创建的vue组件,npm init新建一个项目在npm初始化时pa原创 2021-02-02 09:52:13 · 1199 阅读 · 10 评论 -
制作颜色选择器(全)
颜色选择器原创 2021-01-23 16:05:14 · 1731 阅读 · 1 评论 -
颜色值JavaScript换算(HSV、RGB、十六进制颜色码)
颜色值换算在颜色的计算中,往往需要统一的标准以下记录一些换算方法HSV to RGBHSV 是指☞ Hue色相、Saturation饱和度、Value明度(亮度)。HSVtoRGB(h, s, v) { let i, f, p1, p2, p3; let r = 0, g = 0, b = 0; if (s < 0) s = 0; if (s > 1) s = 1; if (v < 0) v = 0; if (v >原创 2021-01-23 15:16:35 · 2684 阅读 · 0 评论 -
获取URL中后缀的文件名
编写了一个方法去获取url地址后的文件名url地址:'https://img-operation.csdnimg.cn/csdn/silkroad/img/1605098486155.png'代码:var url = 'https://img-operation.csdnimg.cn/csdn/silkroad/img/1605098486155.png'// 获取url中需要的数据 type 1: 获取文件名 2:获取后缀 3:获取文件名+后缀 4:获取文件前缀function ur原创 2021-01-05 16:11:02 · 2140 阅读 · 0 评论 -
JavaScript 类型化数组
JavaScript类型化数组是一种类似数组的对象,并提供了一种用于访问原始二进制数据的机制。Array 存储的对象能动态增多和减少,并且可以存储任何JavaScript值。JavaScript引擎会做一些内部优化,以便对数组的操作可以很快。一般而言,类型化数组通常会与WebGL一起使用,在使用WebGL的时候,ArrayBuffer无处不在。浏览器通过WebGL和显卡进行通信,它们之间会发生大量的、实时的数据交互,对性能的要求特别高,它们之间的数据通信必须是二进制的才能满足性能要求,而不能是传统的.原创 2020-12-22 10:54:37 · 435 阅读 · 0 评论 -
iframe 页面元素互相调用
在界面有时需要嵌套入另外一个页面的内容,这时常常会使用iframe标签去进行引用在数据交互时则可能会在iframe外部页面中调用内部页面元素,或者iframe内部页面调用外部页面元素外部调用内部:$('iframe的ID值').contents().find("内部页面需要寻找的元素")内部调用外部:$(window.parent.document).contents().find("外部页面需要寻找的元素")...原创 2020-11-07 18:49:22 · 289 阅读 · 0 评论 -
使用transform制作书本翻页效果
transformtransform属于CSS属性Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。在网页中需要制作一些有立体感的3d效果,比如书本翻页tansform中有一个rotate旋转属性属性功能rotate(angle)定义 2D 旋转,在参数中规定角度。rotate3d(x,y,z,angle)定义 3D 旋转。rotateX(angle)定义沿着 X 轴的 3D 旋转。rotateY(an原创 2020-11-06 11:29:57 · 1427 阅读 · 0 评论 -
自定义一个适应vue的下拉框组件
在页面制作的过程中,经常需要使用到下拉框组件,有时候使用原生的select标签十分不便,因为存在shadow root。Shadow DOM概念Shadow DOM是HTML的一个规范 ,它允许浏览器开发者封装自己的HTML标签、CSS样式和特定的javascript代码,同时也可以让开发人员创建类似这样的自定义一级标签,创建这些新标签内容和相关的的API被称为Web Component。shadow-root:Shadow DOM的根节点;shadow-tree:Shadow DOM包含的子节点原创 2020-09-06 20:45:29 · 1017 阅读 · 0 评论 -
Uni-app初步了解
Uni-app是什么官网:https://uniapp.dcloud.io/READMEuni-app是一个使用 vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。Uniapp是由DCloud研发的DCloud的初心是什么?为开发者提供免费、高效的开发工具,让天下没有难做的应用 改进应用形态,让用户更方便的获取数字服务DCloud也再次承诺不会对uni-app.原创 2020-05-15 13:44:23 · 844 阅读 · 0 评论 -
快速搭建个人博客网站——Hexo
Hexo原创 2020-05-10 15:57:20 · 392 阅读 · 0 评论 -
JavaScript 进阶——井字棋游戏智能AI搭建
目录井字棋游戏准备的HTML:准备的CSS:第一部分点击出现O的JS代码:现阶段效果:第二部分:判断胜利现阶段结果:第三部分:简单的智能AI现阶段结果:第四部分:之前我们很容易就能击败AI,所以现在要强化AI的难度完整JavaScript代码:结果:不多说了,还没赢过????学习来源:JavaScript井字棋游戏开发与AI算法井字棋游戏...原创 2020-03-15 23:10:13 · 3274 阅读 · 2 评论 -
JavaScript学习(四十)——模拟图片验证
编写一个模拟图片验证码的程序准备两张图片材料:验证图片移动部分然后先编写好大体的框架<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&g...原创 2020-03-01 21:27:30 · 211 阅读 · 0 评论 -
JavaScript(三十九)——鼠标滚轮、滚动窗口制作
鼠标滚轮事件滚轮就是鼠标上的滚轮,它滚动时触发的事件oDiv.onmousewheel = function(event){ oDiv.innerHTML = event.wheelDelta;}onmousewheel就是鼠标滚动事件,mouse鼠标,wheel就是轮子event参数最重要的事就是event.wheelDelta属性,表示了滚动的方向,这是浏览器的规定...原创 2020-02-29 18:28:57 · 947 阅读 · 0 评论 -
JavaScript 知识巩固——内存、调用函数、回调函数
数据类型和引用类型数据类型:null、undefined、string、number、Boolean、symbol引用类型:object、function、array什么是内存就是内存条通电后产生的可存储数据的空间(临时的)内存条的产生和死亡:内存条(电路板)==》通电==》产生内存空间==》存储数据==》处理数据==》断电==》内存空间和数据都消失内存分类: 栈...原创 2020-02-26 19:08:45 · 270 阅读 · 0 评论 -
编写一个具有搜索功能的搜索框
搜索框功能能够输入国家名称全部或部分,出现搜索框的提示下拉框。具体的数据没有放在数据库中,用JavaScript写了一个数组,从这个数组中的国家名称中找就可以了实现过程首先先编写一个HTML页面,在页面中将input的搜索框编写好,先不用css进行修饰然后使用css进行修饰在编写JavaScript时,我使用原生的JavaScript先给定所有的国家数据...原创 2020-02-23 17:07:35 · 13742 阅读 · 4 评论 -
去了解一下区块链
区块链由一个一个区块组成,通过chain来将一个个block区块链接起来人们可以把区块链看成人人都可以信任的分布式账簿区块block一个区块大体上面可以被分为三个部分:数据 哈希值 --- 区块的哈希(hash)相当于人类的指纹 前区块哈希值 --- 除了自己区块的哈希值,还会存储之前区块的哈希值一旦数据被更改,那么哈希值就会发生变化,这样人们就能通过哈希值...原创 2020-02-18 21:20:38 · 474 阅读 · 0 评论 -
JavaScript 反射机制和继承
目录反射机制使用反射去动态设置CSS样式JavaScript原型链继承反射机制反射机制指的是程序在运行时能够获取自身的信息。例如一个对象能够在运行时知道自己有哪些方法和属性。在JavaScript中有一个很简单的语法来实现反射机制,就是for(...in...)for(var p in obj){ if(typeof(obj[p]) == "function"...原创 2019-10-25 20:51:18 · 222 阅读 · 0 评论 -
使用JavaScript解析XML文件
使用JavaScript的方式去解析xml文件xml文件内容:<?xml version="1.0" encoding="gb2312"?><interface name="0101" type="interface" title="0101-Current account opening-活期开户" align="0" left="10" top="10" hei...原创 2019-10-20 18:46:07 · 542 阅读 · 0 评论 -
前端笔试——数字金额转中文
输入一串数字,将其转化成中文例如:12300000输出:壹仟贰佰叁拾万圆例如:123456789输出:壹亿贰仟叁佰肆拾伍万陆仟柒佰捌拾玖圆例如:-123输出:[负]壹佰贰拾叁圆我的代码:var num = 12000000var arr = [];var zf = 0;if(num<0){ zf = 1; num = num*-1;}...原创 2019-10-17 21:42:55 · 345 阅读 · 0 评论 -
JavaScript(三十五)——div子节点操作,飞机大战游戏,小球碰撞边界、焦点事件
目录div中子节点操作HTML DOMcreateElement()方法小球碰撞边界实验input焦点事件飞机大战游戏div中子节点操作HTML DOMcreateElement()方法createElement() 方法通过指定名称创建一个元素,所有主要浏览器都支持 createElement() 方法例子:向div末尾添加节点<bo...原创 2019-07-25 16:08:07 · 866 阅读 · 0 评论 -
JavaScript(三十四)——date时间、BOM浏览器对象模型、DOM节点分类
目录Date时间BOM浏览器对象模型window.documentwindow.frameswindow.navigatorwindow.screenwindow.locationwindow.historyDOM节点分类Date时间例子:获取当前时间,自己设置一个时间//获取当前时间var d1 = Date()console.log(d1)...原创 2019-07-22 15:23:45 · 623 阅读 · 0 评论 -
JavaScript(三十六)——JavaScript编写的轮播页面
JavaScript编写的轮播页面HTML:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播完善</title> <link rel="stylesheet" type="text/css" href="css/lunbo...原创 2019-08-05 16:25:36 · 495 阅读 · 0 评论 -
JavaScript(三十七)——移动端、多媒体、CSS动画
目录移动端基础手机浏览器的内核是什么?四大浏览器内核优缺点视口viewportrem多媒体视频格式声音格式CSS动画CSS中的动画功能移动端基础大纲:视图、rem布局、媒体查询手机浏览器的内核是什么?产业概况:全球仅有四大浏览器内核 目前全球仅有四个独立的浏览器内核,分别为微软1E的Trident、网景最初研发后卖给Mozill...原创 2019-08-10 15:43:54 · 566 阅读 · 0 评论 -
HTML回流与重绘
目录什么是回流什么是重绘回流产生原因导致回流发生的因素如何减少回流与重绘什么是回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置,他的开销是非常大的,回流可以理解为渲染树需要重新进行计算,一般最好触发元素的重构,避免元素的回流;比如通过添加class来添加css样式,而不是直接在DOM上设置,当需要操作某一块元素的时候,最好使其脱离文档流,这样就...原创 2019-08-15 20:57:46 · 2203 阅读 · 0 评论 -
JavaScript(三十八)——动画练习,触屏事件
目录上一篇博客动画练习触屏事件什么是触屏事件:分类以及触发的时机跟踪触屏的特性Touch对象属性分类以及触发时机上一篇博客动画练习HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>...原创 2019-08-12 14:09:07 · 588 阅读 · 0 评论 -
JavaScript学习(二十七)——级联样式表
目录样式表简介什么是CSSCSS规则style对象CSS的继承CSS继承的运用对于网页的设计者来说,对HTML语言不会感到陌生,但如果要让页面达到至加美现的效果, 仅使用HTML标记是不够的, 此时就需要在页面中引入CSS样HTML与CSS 的关系是“内容”与“形式”的关系,由HTML确定网页的内定,CSS来实现页面的表现形式。HTML与CSS的完美搭配使页面更加...原创 2019-01-26 15:31:55 · 420 阅读 · 0 评论 -
JavaScript学习(五)——条件判断语句、跳转语句
目录条件判断语句:if语句:if...else语句switch语句while语句do...while语句for循环语句跳转语句:continue语句break语句条件判断语句:if语句:if条件判断语句是最基本、最常用的流程控制语句,可以根据条件表达式的值执行相应的处理。简单的if语句的语法格式如下:if(expression...原创 2018-11-07 09:47:23 · 360 阅读 · 0 评论 -
JavaScript(三十三)——嵌入式对象
在web上除了JavaScript脚本外,还有各种各样的技术。例如,使用flash、Java applet和activeX等。这些嵌入式对象可以在不妨碍HTML的情况下,使网页变得更加生动。object嵌入式对象标记在HTML中可以使用<object>标记将对象嵌入到页面中。<object>标记可以编写在<head>标记或<body>标记内。...原创 2019-03-08 23:28:39 · 710 阅读 · 0 评论 -
JavaScript学习(三十二)——浏览器检测
浏览器检测对于编写使用于多种浏览器的代码是非常有用的。现在JavaScript的形成源自于当初不同的发展脉络,这也在一定程度上解释了为何不同的浏览器对JavaScript有不同的实现形式。诸如向后兼容性,以及由于市场竞争而产生的自然演变等因素,都会导致JavaScript在每种浏览器上的实现有自己的特性。浏览器检测对象Navigator对象也称为浏览器对象,该对象包含了浏览器的整体信息,如...原创 2019-02-16 18:23:43 · 341 阅读 · 0 评论 -
JavaScript学习(十五)----程序调试与错误处理
目录 IE浏览器内键的错误报告处理异常异常类型语法异常:运行时异常:逻辑异常:触发onerror事件处理异常例子:使用onerror事件处理异常。使用try...catch...finally语句处理异常例子:使用try...catch...finally语句处理异常1.嵌套try...catch语句例子:使用嵌套try...catch语句处理异...原创 2018-12-03 19:33:09 · 198 阅读 · 1 评论 -
JavaScript学习(十二)---正则表达式
目录正则表达式基础正则表达式的基本结构正则表达式的作用1.测试字符串的某个模式2.替换文本3.根据模式匹配从字符串中提取一个子字符串正则表达式语法模式匹配符定义符与原义字符(1)文本验证定位符例子:匹配字符“^”的使用匹配字符"$"的使用用“\b”匹配一个自边界限定符与选择匹配符(1)限定符(2)贪婪匹配与非贪婪匹配(3)选择匹配...原创 2018-11-16 15:42:31 · 257 阅读 · 0 评论 -
JavaScript学习(十四)---String对象中的模式匹配方法
目录1.match()方法语法:stringobj.match(rgExp)例子:2.search()方法语法:stringobj.search(rgExp)例子:3.replace()方法语法:replace(rgExp.replaceText)例子:4.split()方法语法:split([separator[,limit]])1.match()...原创 2018-11-20 14:59:16 · 264 阅读 · 0 评论 -
JavaScript学习(十)——String对象方法
目录练习:String对象的方法1.查找字符串(1)charAt()方法 (2)indexOf()方法(3)lastIndexOf()方法2.截取字符串(1)silce()方法(2)substr()方法(3)substring()方法3.连接和拆分(1)concat()方法(2)split()方法4.格式化字符串练习:在text文档...原创 2018-11-14 17:24:07 · 212 阅读 · 0 评论 -
JavaScript学习(八)——对象分类、JavaScript内部对象(2)
目录对象分类:1.内建对象:2.宿主对象:3.自定义对象:javascript内部对象FileSystemObject对象动态创建FileSystemObject对象FileSystemObject对象的方法In 运算符JS数据类型对象字面量函数:对象分类:1.内建对象:由ES标准中定义的对象,在任何ES中都可以使用----比如:ma...原创 2018-11-09 20:55:04 · 177 阅读 · 0 评论