前端兴趣班
文章平均质量分 69
前端兴趣班
剽悍一小兔
up主是一位java司机,《JavaScript百炼成仙》作者,喜欢撸代码。
展开
-
vue-router全部搞定(附源码)
(先转存,后下载)原创 2024-06-10 10:47:13 · 938 阅读 · 5 评论 -
vue.js怎么保证计算精度
JavaScript 中的精度丢失问题通常出现在处理浮点数时。这是因为 JavaScript 使用双精度浮点数格式(64位),无法精确表示所有的小数。举例来说,尝试计算 0.1 + 0.2 会得到一个近似值 0.30000000000000004,而不是预期的 0.3。因此,在处理需要高精度的小数计算时,可能需要使用特定的库或技术来解决精度丢失的问题,比如使用第三方的库如 Decimal.js 或者采用整数运算来避免浮点数计算。原创 2023-12-18 09:41:17 · 232 阅读 · 0 评论 -
vue.js怎么保证计算精度
JavaScript 中的精度丢失问题通常出现在处理浮点数时。这是因为 JavaScript 使用双精度浮点数格式(64位),无法精确表示所有的小数。举例来说,尝试计算 0.1 + 0.2 会得到一个近似值 0.30000000000000004,而不是预期的 0.3。因此,在处理需要高精度的小数计算时,可能需要使用特定的库或技术来解决精度丢失的问题,比如使用第三方的库如 Decimal.js 或者采用整数运算来避免浮点数计算。原创 2023-12-05 15:46:28 · 1662 阅读 · 0 评论 -
面试官:vue怎么跳转页面和传递参数
在Vue中使用路由器(router)进行页面跳转,需要先安装vue-router模块。上面的代码中,我们定义了两个路由(Home和About),并且在About路由中传递了一个参数:id。在上面的代码中,我们使用了router-link组件进行页面跳转,并且在About路由中传递了一个参数:id。通过props属性可以获取路由传递的参数。现在就可以在About组件中使用this.id获取到传递的参数了。原创 2023-06-08 10:04:10 · 4124 阅读 · 0 评论 -
面试官:什么是debounce?
这是因为Vue是基于响应式原理的框架,在数据变化后需要重新渲染视图,因此将函数封装成 watcher 可以保证在数据更新后才执行相应的操作,避免出现意料之外的情况。是一种限制函数执行频率的技术,它可以在事件触发后延迟一段时间再执行函数,如果在这个时间内再次触发该事件,则之前的计时器会被清除并重新开始计时。在每次被调用时,先清除之前的计时器,并重新设置一个新的计时器,延迟一定时间后执行传入的函数。函数,通过定时器来延迟函数的执行,并能够在规定时间内清除之前的计时器,实现函数调用的控制。函数对该方法进行包装。原创 2023-06-07 13:13:03 · 1450 阅读 · 0 评论 -
面试官:v-model原理?
v-model是Vue框架中的一个指令,用来实现双向数据绑定。它能够在表单元素(如输入框、复选框等)和Vue实例中的数据属性之间建立起一条双向数据通道,使得当表单元素的值发生改变时,对应的数据属性也会相应地进行更新;反之当Vue实例中的数据属性发生变化时,表单元素的值也会自动更新。使用v-model,其中变量名是Vue实例中定义的一个数据属性。可以在元素上同时使用v-model来实现双向数据绑定;对于像复选框这样的非文本表单元素,v-model绑定的是其选中状态。原创 2023-04-28 09:45:08 · 931 阅读 · 0 评论 -
面试官:聊聊js原型
1、所有的引用类型(数组、函数、对象)都可以通过原型可以自由扩展属性(除null以外)。2、所有的引用类型都有一个’_ _ proto_ _'属性(也叫隐式原型,它是一个普通的对象)。3、所有的函数都有一个’prototype’属性(这也叫显式原型,它也是一个普通的对象)。4、所有引用类型,它的’_ _ proto_ _'属性指向它的构造函数的’prototype’属性。(结合2和3)原创 2023-04-12 10:42:26 · 642 阅读 · 0 评论 -
吊打面试官:promise原理详解
Promise是一种异步编程的解决方案。在异步操作中,callback会导致回调地狱的问题,Promise解决了这个问题。一个Promise代表了一个异步操作,它有三种状态:pending(等待态)、fulfilled(成功态)和rejected(失败态)。当异步操作执行成功后,Promise会从pending转变成fulfilled状态,此时会调用resolve方法并传递返回结果;当异步操作执行失败后,Promise会从pending转变为rejected状态,此时会调用reject方法并传递错误信息。原创 2023-04-11 17:48:08 · 673 阅读 · 0 评论 -
吊打面试官:promise原理详解
Promise是一种异步编程的解决方案。在异步操作中,callback会导致回调地狱的问题,Promise解决了这个问题。一个Promise代表了一个异步操作,它有三种状态:pending(等待态)、fulfilled(成功态)和rejected(失败态)。当异步操作执行成功后,Promise会从pending转变成fulfilled状态,此时会调用resolve方法并传递返回结果;当异步操作执行失败后,Promise会从pending转变为rejected状态,此时会调用reject方法并传递错误信息。原创 2023-04-11 09:21:49 · 1372 阅读 · 0 评论 -
html学习笔记-用代码画皮卡丘
效果图练习代码.face { width: 600px; height: 320px; background: #FEE443; position: relative;}.eye { width: 60px; height: 60px; border-radius: 100%; background: #222; position: absolute;}.eye-l { left: 105px.原创 2022-04-30 16:58:35 · 2363 阅读 · 3 评论 -
山寨ElementUI之el-button,手写按钮组件
ElementUI是一款非常流行的vue插件库,整合了开发中大多数的组件。最近正好在学习vue,就尝试简单模拟一下el-button的实现。最近正好在学习vue,就尝试简单模拟一下el-button的实现。引入vue核心js<script src="vue.js"></script>2.用Vue.component语法设置全局插件Vue.component('elButton', { name: 'elButton', pro..原创 2022-04-30 16:43:02 · 3697 阅读 · 0 评论 -
JavaScrip---ES6新语法:展开运算符...(三个点)详解
概念太复杂,你可以这么理解...概念太复杂,你可以把...理解为展开运算符。谁可以使用展开运算符来进行展开呢?1.字符串可以展开,展开成逗号分割的元素集合。案例:let str = "abc"console.log(... str)答案是什么呢?当我们展开字符串"abc"的时候,就相当于在那个位置写了a,b,c!也就是说console.log(... str)相当于写成了console.log(‘a’,'b','c')。验证一下刚才的代码,结果除了字....原创 2022-04-08 00:18:04 · 4646 阅读 · 16 评论 -
分享一个会遮掩的吊炸天登录页面
今天逛gitee,发现了一个有趣的页面,于是来分享一下。先看效果:熊猫是css画的,眼睛会跟着鼠标转动,当填写密码的时候,熊猫会把登录框举起来,遮住眼睛。熊猫是css画的,每一个部分都是,真的是直呼666/* 开始画熊猫 */.panda{ /* 相对定位 */ position: relative; width: 200px;}/* 脸部 */.face{ width: 200px; height: 200px; backgro原创 2022-03-18 11:45:00 · 10795 阅读 · 20 评论 -
前端面试:浅拷贝和深拷贝的区别?
浅拷贝(shallow copy):只复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存; 深拷贝(deep copy):复制并创建一个一摸一样的对象,不共享内存,修改新对象,旧对象保持不变。...原创 2022-03-08 22:07:50 · 23892 阅读 · 71 评论 -
JavaScript闭包 - 面试重灾区,如何应对?
1.闭包-面试重灾区最近面试的过程中,但凡问到JavaScript闭包的时候,一脸懵逼的情况的占多数。闭包这个东西,你说它重要吧,确实很重要,毕竟这是很多前端框架广泛使用的开发技巧。你说他不重要吧,也确实没那么重要,因为我们开发项目基本都是套用现有的框架,在框架的范围里面写代码,很少会用到闭包。可是,耐不住面试经常要问啊。这一节,我们就来聊聊闭包的话题!2.什么情况会产生闭包先看一个例子:function f(){ let a = 1; return f.原创 2022-02-27 11:55:59 · 2228 阅读 · 18 评论 -
纯JavaScript入门级小游戏:兔子抢金币(附演示地址+源码)
Hello,大家好,我是兔哥,我又来分享好玩的入门级项目啦。今天给大家带来的是一个纯JavaScript入门级小游戏:兔子抢金币,规则非常简单,控制屏幕上的兔子去接天上掉下来的金币,接满20个就可以通关。下面先放出在线试玩的地址:JavaScript应用http://java18.cn/tuzi/index.html游戏画面:用键盘上的A和D控制兔子的左右运动。兔子是会一直跳动的,这其实是用了帧动画:如上图所示,运用setInterval不停地更换背景图片就可以实现兔子跳动的原创 2022-02-20 15:11:28 · 2051 阅读 · 5 评论 -
三分钟学会 H5 聊天机器人开发(附源码和在线演示)
【学习目标】熟悉和掌握 HTML结构和CSS的相关知识 学会使用HBuilder进行APP打包 熟悉JavaScript的基本用法和jQuery的使用(提前预习) HBuilder 它是一个快速开发H5程序的工具,很多企业都在用,是一个非常好用的前端开发IDE(开发平台)。 项目搭建 选择新建移动APP目录结构如下:其中css文件夹存放我们的css文件,js文件夹存放项目中需要使用的各种js文件。在该项目中,我...原创 2022-02-19 10:24:40 · 4375 阅读 · 2 评论 -
前端常规面试题 - 初级开发01(含答案)
1.浅谈一下如何避免用户多次点击造成的多次请求。答:我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,用户不能再单击第二次,直到重新加载页面或者跳转。这样,可以一定程度上防止用户重复提交导致应用程序上逻辑错误。还有很多其他的方式进行防止重复点击提交,如1> 定义标志位: 点击触发请求后,标志位为false量;请求(或者包括请求后具体的业务流程处理)后,标志位为true量。通过标志位来判断用户点击是否具备应有的响应。2> 卸载及重载绑定事件:点击触原创 2022-02-12 14:48:38 · 1528 阅读 · 4 评论 -
JS葵花宝典秘籍笔记,为你保驾护航金三银四
JS葵花宝典秘籍笔记,为你保驾护航金三银四转载 2021-12-18 19:53:19 · 310 阅读 · 0 评论 -
从植物大战僵尸谈谈CSS定位布局
运行效果:步骤1:先把页面搞一搞首先,我们需要创建一个HTML页面,把场地图片引入进来。<!DOCTYPE html><html><head> <title></title> <style type="text/css"> body { /*设置溢出隐藏,为了没有滚动条*/ overflow: hidden;原创 2021-12-14 22:03:40 · 6628 阅读 · 13 评论 -
js常用方法和一些封装(2) -- 随机数生成
任何编程语言,随机数都是必不可少的,我在开发过程中,尤其在自己做一些小玩意的时候,就经常使用随机数,后来发现每次使用都懒得写,直接去网上搜一个,拿过来就用了。原创 2021-12-09 21:51:41 · 383 阅读 · 0 评论 -
JavaScript常用方法和一些封装
博主在js上已经花费了很长时间,不禁深深地被其轻巧而强大的功能,以及优雅灵活的写法所折服,一直没找到机会来总结一下,正好把学习的东西做一个汇总。题外话我始终认为,学习编程最好的方式就是去写,甭管写的怎样,也要去练习。当初学完了数组,我记得自己是先把里面的每一个方法都敲了一遍,然后反复思考,通过这些方法,我能够做些什么?很多语法我一开始也是很不理解的,然而在不断地运用过程中,慢慢地就开始明白过来了。只要抓住一个大方向,然后不断地练,就一定能深入理解!正如国外一个有名的数学家所言,只有抓住了原创 2021-12-09 21:50:16 · 284 阅读 · 0 评论 -
最简vue.js原理教程,适合初学者
1.我们要做什么?早就想写这个了,和csdn高校俱乐部约好了有个直播,想着反正要备课,我不如直接把要讲的东西写成博客算了。说到vue,我们自然就想到数据绑定。说到数据绑定,自然就想到MVVM。什么是MVVM呢,大家可以看下上面这张图 。MVVM采用了双向数据绑定的思想,基本可以分为三层:M(Model,模型层),负责业务数据相关,比如vue里面的data就是典型的Model。 V(View,视图层),视图相关,展示给用户的交互界面,同时捕获用户的操作,我们可以理解为页面的DOM原创 2021-12-07 23:55:34 · 1372 阅读 · 1 评论 -
三分钟手写一个迷你jQuery,附源码
如果你看过《JavaScript百炼成仙》的函数七重关,相信也可以很快写出来。虽然不难,但是通过这个例子,可以很好地巩固基础,和增强自己学习前端的自信心。原创 2021-12-05 21:08:56 · 2129 阅读 · 18 评论 -
Node.js安装与配置
NodeJS的作者说,他创造NodeJS的目的是为了实现高性能Web服务器,他首先看重的是事件机制和异步IO模型的优越性,而不是JS。但是他需要选择一种编程语言实现他的想法,这种编程语言不能自带IO功能,并且需要能良好支持事件机制。JS没有自带IO功能,天生就用于处理浏览器中的DOM事件,并且拥有一大群程序员,因此就成为了天然的选择。简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.j原创 2021-10-30 20:21:07 · 399 阅读 · 0 评论 -
我曾经培训新员工的时候出的jsjq入职笔试题,真的是想着法子送分了。。。
今天整理资料,发现了一份当年我出的笔试题,那时候公司急招人,连我这个半吊子前端都征用了。。。导航一.基础知识(15分)实战演练二.改错题(5分)三.简单算法题 (5分)【附加题】四.方法封装(5分)五.综合题(15分)六.js面向对象(5分)一.基础知识(15分)1.JQuery 的简写是? (1分)2.通过 jQuery,选择器 $(“div”) 选取什么元素? (1分)3.把所有 p 元素的背景色设置为红色的正确 jQuery 代码是? (1分)3.通过 jQuery, $(“div.int原创 2021-10-14 22:00:55 · 197 阅读 · 1 评论 -
我自己写了一款JavaScript表格插件,美滋滋~~
导航使用效果文档说明源码使用效果文档说明第一步、从tableFactory获图标Form对象。或者:第二步、加载参数,传入json对象表格效果:json参数明细:实例:对应于:第三步、将table加载到页面中对应ID的div中。如:根据列数可以动态调整TD的宽度单独放入一个文件,可以直接调用。源码//表格工厂var tableFactory = function(type){ if(this instanceof tableFactory){ r原创 2021-10-14 21:22:24 · 476 阅读 · 2 评论 -
你可曾见过如此简单粗暴的JavaScript解说 -- js脚本运行机制
写作不易,转载请注明出处,谢谢。首先,上几道我编写的 js 题,作为分析的样本。请根据代码,选择正确的选项。第一题var a = 0;function test(){ alert(a);}test();A. 0B. nullC. undefined第二题var a = 0;function test(){ alert(a); a = 100;}test();A. 0B. nullC. undefined第三题var a = 0;function test(原创 2020-11-26 18:45:25 · 242 阅读 · 3 评论 -
《从案例中学习JavaScript》之实现对话效果
今天突发奇想,js能不能通过字符串和定时器来实现游戏中的对话效果呢。试了一下,还真挺好玩的。上效果图:本节涉及的知识点:字符串的charAt方法js定时器setInterval(轮询)###1. charAt方法js的charAt方法是用来获取字符串中的某一个字符的,它是属于string的一个方法。比如:var str = 'ABCDEFG';var a = str.charAt(6);//取下标为6的字符alert(a);###2. setInterval定时器具体用法如原创 2020-11-26 18:44:05 · 623 阅读 · 2 评论 -
《从案例中学习JavaScript》之实现网页版阅读器
###序现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋。我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨。再久远一些,小的时候,我也经常和小伙伴们组团去书店看白书,也就是白看书。古老的木质书架上那一叠叠厚重的黄皮小说书,在年幼的我眼里仿佛是比盘子里的午餐肉更加美味可口的东西。而在当今这个信息化的时代,看书变得空前的便利,可是儿时那种期待和兴奋的感受却消失在了时间的长河。岁月在流逝,时代在进步。愿放下所有的浮躁,在新的时代愉快地生活,无所谓原创 2020-11-26 18:41:04 · 487 阅读 · 1 评论 -
简单易懂的JSON入门
本节重点来介绍一下JSON,JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,我们称之为JavaScript对象表示法。也就是说,JSON是一种格式。首先搞清楚三个概念,即什么是JSON字符串,什么是JavaScript对象,还有什么又叫做JSON对象?先来说一个事,在没有JSON之前,前台页面和Java等语言充当的服务器层,到底是如何传输数据的呢?没错,是通过XML来传输的。比如一个登陆页面。页面上有用户名和密码两个输入框,当我点击登录按钮,这两个数据就会.原创 2020-11-23 20:00:20 · 328 阅读 · 0 评论 -
彻底攻略JS数组
在开始本章之前,先给出上一节的答案,参考答案地址:http://www.xiaotublog.com/demo.html?path=homework/03/index21.JS数组的三大特性在JavaScript中,数组和其他编程语言中的数组有所不同。首先体现在,在一般的编程语言中,数组的索引只能是数字,而js数组中,它的索引可以是任意类型。比如,你可能会看到这样的代码:var arr = []; //新建一个数组arr['name'] = 'rose';arr['age'] = 12;.原创 2020-11-23 19:59:31 · 209 阅读 · 0 评论 -
彻底攻略JS回调函数
这一讲来谈谈回调函数。其实一句话就能概括这个东西:回调函数就是把一个函数当做参数,传入另一个函数中。传进去的目的仅仅是为了在某个时刻去执行它。如果不执行,那么你传一个函数进去干嘛呢?就比如说对弈下棋,如果你都不想赢,那么你为什么要下棋?当然了,如果你达到了某种至高无上的境界,参悟出一个“道”来,就不一样了。所谓手中无剑,心中有剑。写了一个函数,我虽然没有去执行它,但是在我心中已经执行了。在此我们先不谈那么高大上的境界,先说点俗的,你想想啊,你好不容易写了一个function,你不去执行执行它,.原创 2020-11-23 19:58:59 · 769 阅读 · 0 评论 -
HTML&CSS Table元素详细解说,小白也能懂的前端教程!
##1.预热css样式多如牛毛,我不可能一个一个去讲,那样好像背字典一样,我相信你们也不喜欢这样的方式。所以,我会在实战中慢慢和你讲解,然后,你记住一些重要的css属性就可以了。关键是,你要学会去查资料,最好的查资料方法,不是那种去W3C School上,一页一页看过去,那样的话不知道要看到什么时候,而是应该去看一些网页的源码,看看他们的网页是怎么做起来的,用了哪些css属性?这里面,肯定有很多css属性你连见都没见过,我的建议是,先大概去猜一下,然后用浏览器的F12调试功能去倒腾倒腾。不需要你对每一个c原创 2021-10-07 14:37:42 · 927 阅读 · 0 评论 -
第五节 关于浮动和清除浮动的解说,以及两个大坑不要踩
###1.随便唠叨几句 这一节课我会对浮动元素和怎样清除浮动相关的技术进行一个讲解,同时,我会列举一些我们前端开发中常见的坑,希望大家以后不要在这些地方犯错。在开始今天的课程之前,有一个东西我需要先讲一下,学网页,我认为最最重要的就是学布局,如果一个网页,你不去布局,学再多的div加css也无济于事,你就算学了再多的特效,又能怎么样?那么,何为布局呢?很简单,就是一句话,把元素放在你想要放的地方,这个就是布局了。对于一些后台管理系统,其实最最常见的还是table布局,包括现在很流行的前端框架原创 2020-11-20 19:57:28 · 273 阅读 · 0 评论 -
【手把手】制作一个简单的HTML网页
新建一个html文件:我要给body添加一些样式,就在head元素上挂载一个style元素。然后,写样式表:效果:这样的话,我们就可以看到body部分了。现在,我给body添加一点padding。页面上看不出区别,让我们打开F12,看一下现在的body变成了什么样子。示意图:从图中可以看出,body元素分为三层,最里面的一层,就是520 x 500的那部分,这个叫做内部真实空间,也就是说,你可以在里面添加其他元素,比如div元素,p元素,a元素等等。然后中间的一层就是paddin原创 2020-11-20 19:56:56 · 91319 阅读 · 17 评论