web前端基础
文章平均质量分 57
Web前端学习笔记
小芒果cuty
希望把学过用过的知识留一丝痕迹,点亮自己也照亮他人。
展开
-
Vue中使用js控制滚动条动画滚动
实现功能:Vue中使用js控制滚动条动画滚动知识:js中scrollTop、scrollHeight、offsetHeight、clientHeight、offsetTop的区别转载 2021-12-31 10:29:52 · 1635 阅读 · 0 评论 -
ES6 Symbol的作用与应用场景
推荐阅读理解和使用ES6中的Symbol原创 2020-09-13 17:32:03 · 591 阅读 · 0 评论 -
js严格模式
什么是严格模式?JavaScript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式,即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略。严格模式对正常的 JavaScript 语义做了一些更改:1.消除了 Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为。2.消除代码运行的一些不安全之处,保证代码运行的安全。3.提高编译器效率,转载 2020-09-06 23:45:49 · 71 阅读 · 0 评论 -
call()、apply()和bind()用法和区别
相同点:call()、apply()和bind()都可以改变函数内部的this指向不同点请看下面实例:call():call方法既可以调用函数,又可以改变函数内的this指向。var obj = { name: 'andy'}function fn(a, b) {console.log(this);console.log(a+b)};fn(1,2)// 此时的this指向的是window 运行结果为3fn.call(obj,1,2)//此时的this指向的是对象obj,参数使用逗号隔原创 2020-09-06 23:04:31 · 369 阅读 · 0 评论 -
js函数内部的this指向
在不使用箭头函数和call、apply、bind的情况下,这些this的指向,当我们调用函数的时候是确定的。调用函数的不同决定了this指向的不同。调用方式this指向普通函数严格模式下是undefined,正常模式是Window表达式函数严格模式下是undefined,正常模式是Window构造函数实例对象对象方法调用该方法所属的对象事件绑定方法当前事件所绑定的对象定时器函数Window立即执行函数(自调用函数)严格模式下是undef原创 2020-09-06 19:16:15 · 3872 阅读 · 0 评论 -
js定义函数的三种方式--面试题
1.自定义函数(命名函数)function fn () {}2.函数表达式(匿名函数)let fn = function() {}3.利用new Function(‘参数1’,‘参数2’,‘函数体’)let fn = new Function("num1","num2","console.log(num1+num2)");fn(12,3) //15...原创 2020-09-06 18:29:23 · 126 阅读 · 0 评论 -
画一个js原型链
要点:每个函数(function)都有一个prototype(即:显式原型),它在函数被定义的时候产生。每个实例对象都有一个__proto__,(即:隐式原型),它在对象被创建时产生。原型对象中有一个constructor属性,它指向相对应的函数对象。对象的隐式原型的值为其对应的构造函数的显式原型的值。原型链的作用:当访问一个对象的属性时,先在自身的属性中查找,若找到,则可以访问自身的这个属性。若没有找到,再沿着__proto__这条链向上查找,若找到,则可以访问原型对象中的该属性。若都没能找原创 2020-09-04 00:57:49 · 329 阅读 · 0 评论 -
es6箭头函数--基础的this指向
第一组比较:const obj = { name: '张三' }function fn() { console.log(this);//{ name: '张三' } return () => { console.log(this);//{ name: '张三' } }}const resFn = fn.call(obj);//改变了fn的this指向,指向obj这个对象resFn();结果显示:两次打印的this都指向obj这个对象,输出结果都是{原创 2020-08-24 16:56:10 · 387 阅读 · 0 评论 -
let和var作用域问题--(经典面试题)
1.用var定义循环变量var arr = []; for (var i = 0; i < 2; i++) { arr[i] = function () { console.log(i); } } arr[0]();//2 arr[1]();//2我们看到,两次输出的i都是2,这是因为循环变量i是使用var声明的,var声明的变量不存在块级作用域,是全局存在的,又因为程序是顺序执行的,所以function这种复杂数据类型会存在堆里面,当for循环执原创 2020-08-24 15:18:43 · 961 阅读 · 0 评论 -
用百度地图定位公司位置-步骤详解
1.打开百度地图开发页面页面网址:http://lbsyun.baidu.com/2.找到开发文档下的地图生成器3.修改当前位置4.获取代码5.复制代码6.修改密钥若是没有密钥,得申请一个,点击右方申请密钥,申请完修改html文件中“您的密钥”为自己的密钥即可7.获取位置信息此时点击地图上任意位置可获得该位置相关信息...原创 2020-08-03 11:20:34 · 8003 阅读 · 0 评论 -
中国地图-省份信息
现在echarts和百度地图对于中国的地理位置相关信息会保密,所以是无法直接下载获取到中国的省份信息,那本页面写了一个完整的中国省份地图,有需要可以收藏。china.js文件下载地址:https://pan.baidu.com/s/1GOE4MPVUryIyVpgYm-LR-w 提取码:72ii<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equi转载 2020-08-03 10:48:40 · 2510 阅读 · 0 评论 -
大事件后台管理系统-功能详解
下图为发送ajax请求会返回的状态码:(本文主要用到200和400)原创 2020-07-30 20:37:46 · 1466 阅读 · 0 评论 -
js实现幸运大转盘
需求: 用点击事件等相关知识点完成幸运大转盘,页面打开,出现九宫格蓝色色块; 色块内分别是奖品,当点击开始按钮时,有一个灰色色块开始转动; 点击停止按钮时,灰色按钮停在哪里,就表示所中的奖品是什么.如下图:html部分原创 2020-07-28 22:59:59 · 2697 阅读 · 1 评论 -
js购物车初体验
这是一个简易的购物车,通过操作dom元素,实现商品的单选全选、增删改以及数据的联动,可以考验初学者对于dom的掌握情况。html部分:<div class="container"> <!-- 商品展示表格 --> <table class="tb"> <thead> <tr> <th>转载 2020-07-28 22:42:05 · 253 阅读 · 0 评论 -
js键盘事件实现微博减字功能
需求: 使用 HTML 进行页面布局,当文本域内输上字且键盘按键被松开时,将在文本域右下角计算出还可以输 入多少字,当显示出“还可以出入 0 个字符”时,文本域内不能再输入文本,本案例总共可输入 40 个字符。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d.原创 2020-07-09 15:03:26 · 1052 阅读 · 0 评论 -
JS和setInterval()一起写一个动态时钟
我写的这个时钟分两部分,一个是钟表,一个是表里面的现代时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>时钟</title> <style>转载 2020-06-21 01:13:53 · 371 阅读 · 0 评论 -
JS求100-999之间的水仙花数--两种方法
我们要求100-999的水仙花数,那么我们首先来了解一下什么是水仙花数吧!比如说153这个数,153=13+53+33,像这样一个数等于它各位数的立方和,他就是个水仙花数。这个题目有很多种方案,我选择把,每一个数的个位、十位、百位找出来,当然小伙伴们也可以选择把数字转换成字符串去做。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie原创 2020-06-21 01:03:38 · 3326 阅读 · 0 评论 -
JS等腰三角形
这里面等腰三角形不是采用打空格的形式,而是直接文本居中,你说简不简单。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>等腰三角形</title> <sty原创 2020-06-21 00:51:26 · 1527 阅读 · 0 评论 -
JS实现彩色乘法口诀表
刚学JS,用比较简单的“循环”+“表格”实现了页面刷新,所有的乘法口诀表背景色都会变换的小案例。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>乘法口诀表</title>原创 2020-06-21 00:48:22 · 885 阅读 · 0 评论 -
HTML标签--学习笔记1
首先,先介绍一下前端,前端说白了就是我们眼睛所看到的页面上呈现的东西,这些都归前端管。HTML、CSS、JavaScript这三个是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。作为前端初学者,不建议下载一些自动填充代码的软件,一个记事本就可以。如果要下载的话,可以下一个...原创 2020-06-21 00:33:13 · 124 阅读 · 0 评论 -
如何修改表单元素input里面提示文字的颜色
我们知道,在CSS中,一般用color属性可以修改文字的颜色。不过,当你书写<input text="text" placeholder="我是红色的" style="color:red">这样一行代码时,你会发现字体怎么样都不会变红,那么怎样可以让表单元素里面的文字变红呢? 复制粘贴下面的代码到CSS样式里就可解决这个问题,不复制粘贴要自己打出来...原创 2020-06-21 00:29:07 · 13010 阅读 · 0 评论