自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

sunset的博客

前端从入门到...算了我还年轻

  • 博客(52)
  • 收藏
  • 关注

原创 Echarts series-graph roam 缩放

这个事件找了我整整两天当echart不需要geo作为背景时使用echarts.on('graphRoam', (params: any) => { console.log(params);});echarts issues地址

2022-04-12 10:59:25 1693 1

原创 处理 URL 的查询字符串

new URLSearchParams()构造的实例可以查询字符串中的参数,如:var paramsString = "q=URLUtils.searchParams&topic=api"var searchParams = new URLSearchParams(paramsString);通过searchParams.get('q')即可拿到结果;react中获取到的url里的参数字符串也可以这样写const searchParams = new URLSearchP.

2021-11-04 15:59:34 351

原创 微信小程序多个slide-view打开一个自动收起上一个(手风琴效果)

首先来说小程序we-ui提供了slide-view组件,并且给出了show属性和bindshow事件,利用好这两个就可以实现效果了(后面详细说),但是slide-view组件有个小bug,当打开过的条目再左滑打开时会有不跟手现象,查了很多地方都没细说怎么解决(本文章目的)实现手风琴效果wxml:<slide-view wx:for="{{todoList}}" wx:key="_id" mark:id="{{item.id}}" buttons="{{sl

2020-12-11 16:14:52 1362 3

原创 正则表达式

正则表达式:regular expression常用于爬虫用于字符串匹配判断,例如判断某个字符串是否为一个合法的手机号.我这里用的js,不同语言声明正则不太一样,但正则表达式是一样的在js中,正则表达式是一个对象,有两种创建方法:正则表达式创建及匹配方式第一种,通过构造函数创建.参数是正则表达式字符串.var reg1 = new RegExp("\d");第二种...

2018-08-14 21:31:43 411

原创 nodejs学习:nodejs模块化

利用nodejs计算排列组合为例子:排列组合需要用到阶乘,所以新建main.js和jiecheng.js文件和pailiezuhe.js文件(因为学习模块化,所以创建两个文件)将一下代码复制进jiecheng.js,注释详解var abc = 100;// 计算阶乘的方法function jiecheng(n){ var con = 1; for(n;n&gt;...

2018-08-14 21:16:35 765

原创 nodejs学习:初识hello world和nodejs的全局对象

首先下载nodejsnodejs是谷歌公司于2009年发布的JavaScript运行环境,提供了大部分操作系统API(包括网络功能API),主要用于服务端开发使用nodejs运行js文件:1,打开命令行,并进入要运行的js所在的目录2,执行node xxxx.js 命令新建一个helloworld.js文件console.log("hello world");在当前文件夹...

2018-08-14 21:04:42 407

原创 JS-闭包和变量声明提前

闭包在函数A中声明了函数B,函数B中使用了函数A的作用域中的变量,且函数A返回(return)了函数B,那么函数B就对函数A的作用域形成了闭包,函数A调用完毕之后,只要返回的函数B存在,函数A的作用域也一直存在function makeFn(){ var n1 = 100; function fn(){ var n2 = 200;...

2018-08-14 20:55:04 456

原创 JS-原型和原型链

先声明一个构造函数function People(name,age){ this.name = name; this.age = age; }把类的方法写在构造函数原型对象中,子类就不能再通过调用父类构造函数来继承方法(属性还是可以继承)// 给People的原型添加方法People.prototype.speak = function()...

2018-08-14 20:49:03 341

原创 JS类的继承/使用原型优化对象

类的继承在面向对象编程中,类是某一些具有相同特性的对象的集合,例如,猫,狗,鱼都可以抽象为动物,手机,电脑可以抽象为电子产品根据某个类所实例化的个体叫做这个类的对象(类实例化后就是对象,类是模板,对象是产品)如果A类是B类的子类,那么在设置这两个类的构造函数时,可以选择让A继承于B,例如function Animal(age,color,weight){ this...

2018-08-14 20:30:32 290

原创 JS中改变this指向

在js中,函数也是对象,函数也有自己的属性和方法,先定义一个函数做例子 function test(a,b){ console.log(a+b); console.log(this); }这时候调用test,this指向window,原因看这里window对象和全局域然后创建一个对象var obj = {name:"wang"}***...

2018-08-14 20:13:17 1225

原创 JS构造函数

创建一个对象可以字面量创建或构造函数创建字面量创建对象例如:// 字面量创建对象 var p1 = { name:"sunset", speak:function(){ console.log("我是",+this.name); } }但如果需要创建多个同一类型(属性和方法都相同)的对象,使用字面...

2018-08-14 20:05:02 6779 1

原创 js中if判断小技巧

在js种,条件判断的括号中可以写非布尔值写数字类型时,0被认为值假,非0都是真写字符串时,空字符串是假,非空字符串都是真undefined,null,NaN都被认为是假 任何对象都会被认为是真if(123){ console.log("真"); }else{ console.log("假"); }修改123为字符串对象等...

2018-08-03 21:51:56 425

原创 jQuery入门-4,jQuery动画

动画还是代码效果演示比较好,复制粘贴,浏览器打开,根据注释理解 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,

2018-08-03 21:48:18 267

原创 jQuery入门-3,jQuery的链式调用及事件监听

jQuery的链式调用为什么可以链式调用?jq对象调用修改元素的方法之后,返回值还是对象本身$("#box") .text("文本内容") .css("color","red"); $("&lt;div&gt;&lt;/div&gt;") .css("width","100px")

2018-08-03 21:46:37 425

原创 jQuery入门-2

首先引入jquery&lt;script src="jquery.js"&gt;&lt;/script&gt;$函数,参数如果是html字符串,用于创建元素,html字符串可以是嵌套复杂的html字符串,同时可以包含属性var $div = $("&lt;div id='box'&gt;&lt;span&gt;123&lt;/span&gt;&lt;/div&gt;&

2018-08-03 20:59:49 255

原创 jQuery入门-1

jquery的引入一般script标签写在body里的最下面,script的标签是按照顺序先后导入并执行的,在第一个script标签执行完毕之前不会执行第二个script,多个script标签,本质上是将其中的代码拼接在了一起,所以他们处于同一个全局作用域导入jquery必须写在使用它之前,然后再在下面创建script标签写js代码&lt;script src="jquery.js"...

2018-08-03 20:43:27 317

原创 表单元素属性和事件

关掉input烦人的自动提示给input添加autocomplete="off"即可&lt;input type="text" id="username" autocomplete="off"&gt;设置元素不可交互(input,select等表单元素)添加disable属性 &lt;button id="regist-btn" disabled&quo

2018-07-27 11:52:57 1166

原创 用js的requesAnimationFrame动画做弹跳球

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

2018-07-26 17:50:40 2118

原创 JS动画requestAnimationFrame

requestAnimationFrame,H5新出的方法 requestAnimationFrame函数,参数是一个函数,效果是在浏览器下一次刷新帧时调用这个函数浏览器对于页面的刷新频率是 每秒60次,相当于大约17毫秒一次.(当计算机资源不足时,可能会导致刷新率降低)function f2(){ console.log("帧刷新了"); timer = reque...

2018-07-25 21:35:51 761

原创 history对象

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

2018-07-25 21:29:22 249

原创 JS中navigator对象

这个对象一般在我们想知道自己的浏览器型号时会用到其中常用的时userAgent属性 navigator对象,记录了运行当前页面的浏览器信息以及操作系统信息和一些硬件信息  navigator.userAgent属性,记录了浏览器类型,操作系统类型等 console.log(navigator.userAgent)...

2018-07-25 21:28:25 1028

原创 JS中location对象

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

2018-07-25 21:25:56 752

原创 window对象和全局域

DOM:document object model,文档对象模型  DOM的根对象是document,通过DOM可以实现对页面的修改和操作在开发过程中,有时也需要对浏览器本身进行一些设置,例如刷新页面,页面后退,前进等,这些操作是针对浏览器的,所以不能通过document进行,这时候用BOMBOM:browser object model,浏览器对象模型   BOM的根对象时window,...

2018-07-25 21:22:10 971

原创 js中事件默认行为

事件对象的preventDefault方法,可以阻止本次事件所触发的浏览器默认行为,例如a标签的href跳转,浏览器的F5刷新等等在点击事件里添加e.preventDefault()即可准备一个a标签就行&lt;a id="link" href="http://www.baidu.com"&gt;百度&lt;/a&gt;&lt;script&gt; var lin...

2018-07-25 21:12:27 812

原创 js第三种添加事件监听的方法

前面写过在元素标签里写onclick();和获取元素通过js添加onclick,这次记addEventListener方法上一篇记事件响应链的时候记了两个div的嵌套时响应问题(响应链),这次还用嵌套来记addEventListener先准备好两个嵌套的div,并设置不同的背景色和大小&lt;div id="outer"&gt;      &lt;div id="inner"&gt...

2018-07-25 21:06:49 7358

原创 事件响应链

先附一张老师的图:这里少了一层html(当时懒得画)比如说两个div嵌套,然后点击内层div时,外层div也会响应onclick,如&lt;div id="outer"&gt; &lt;div id="inner"&gt;&lt;/div&gt; &lt;/div&gt; 事件对象的stopPropagation方法,可以阻止事件的继续传播&lt;s

2018-07-25 20:56:37 267

原创 js的scroll事件

 这个代码是在id为box的div里写了很多p标签然后溢出,给#box设置overflow:scroll;然后在#box里滚动条滚动时就会输出&lt;script&gt; var box = document.getElementById("box"); // 元素对象的onscroll事件,当元素内容发生滚动时触发,它是一个频繁触发的事件 box.onscroll ...

2018-07-25 08:59:33 11452

原创 元素的尺寸和位置

如果有两个div嵌套,像这样&lt;style&gt; body{ margin: 0; } #box{ width: 100px; height: 80px; background-color: red; color: ...

2018-07-25 08:55:56 286

原创 js定时器的创建和取消

setTimeout函数,创建一个定时器,它可以实现延迟一段时间后执行某段代码有两个参数:第一个参数是定时器事件函数,表示需要延迟执行的函数,第二个参数是延迟时间,单位是毫秒返回值是一个定时器编号,通过这个编号可以在定时器触发前取消定时器var timer = setTimeout(function(){ console.log("3秒过去") },3000)...

2018-07-23 21:43:32 3370

原创 js键盘事件

只有能够成为焦点的元素才能监听键盘事件如:input,a,button,body等表单元素onkeydown,键盘某个键被按下的事件.onkeyup,某个键弹起时的事件一般后面写匿名函数(当然也可以不是)document.body.onkeydown = function(e){ console.log("键盘上某个键被按下了"); conso...

2018-07-23 21:40:25 231

原创 js鼠标事件

贴代码和效果比较直观,实现点击切换颜色&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scal

2018-07-23 21:37:18 764

原创 js元素对象的自定义属性

自定义属性一般用自定义属性选择器html标签的属性可分为html自带属性和自定义属性html自带的属性又分为通用属性和专用属性,例如id,class,title是通用属性,src,href是专用属性html标签还可以添加自定义属性对于自定义属性,浏览器在解析页面时会忽略这些属性在HTML标签中添加的属性叫做标签属性找到这个元素对象,通过打点访问的属性是这个对象的属性。这...

2018-07-23 21:33:13 2189

原创 通过js修改元素html属性

通过js修改的样式实际上是修改了元素的行内样式获取元素对象:var title = document.getElementById("title");通过style属性修改样式,在css中样式名是通过 - 分隔,在js中,样式名要用驼峰命名法title.style.fontSize = "20px";textContent和innerHTML属性都用于修改元素的内容,区别是:t...

2018-07-23 21:25:14 13689

原创 JS中数组常用方法

var arr1 = [4,5,6,3];//栈// .push,向数组的最后添加一个元素。arr1.push(10);console.log(arr1);// .pop,从数组最后删除一个元素。返回值就是删除的元素。var n = arr1.pop();console.log(n);console.log(arr1);// .unshift,向数组的最前边添加...

2018-07-20 11:37:14 172

原创 基本数据类型的自动装箱

自动装箱js中,number,string,boolean三种基本数据类型都有自己对应的对象类型number对应Numberstring对应Stringboolean对应Boolean只有对象才有属性和方法,基本数据类型没有属性和方法,但是在js中却可以使用基本数据类型调属性和方法,例如:"asd".length();"asd".split();因为:在js中,...

2018-07-19 21:46:39 250

原创 JS中对象和对象属性

对象创建格式:在js中可以使用字面量(直接量)创建对象,格式为:{属性名1:属性值1,属性名2:属性值2,......}属性名的命名规则与变量名相同var p1 = { name:"名字", age:20};可以使用 打点 的方式访问对象的属性console.log(p1.name);js特有功能:对象在创建之后可以添加新的属性   p1.s...

2018-07-18 22:19:15 256

原创 使用git把网页放到服务器上让别人看得见

只能挂静态网页,动态网页还是需要买服务器的这里只是把代码挂到了码云上,用的码云的gitee page 功能,github也有相同功能,但GitHub服务器在国外,上GitHub很慢所以选择码云,更多更能自行百度吧先展示效果(无聊时随便写的一个首页,就别吐槽了),访问这个可以看到  https://sunset0827.gitee.io/h5-first/正文教程开始:下载git,懒癌患者百度云传送...

2018-07-16 09:02:16 4624 4

原创 BootStrap框架引用

虽然个人不是很喜欢用BootStrap框架,但还是要会用的!使用bootstrap先去官网下载:bootstrap下载官网这里下载第一个就行了然后下载jQuery.js,因为bootstrap用到了jquery,jQuery下载官网,一般我们学习用普通版,min版是去了空格缩进,开发一般用min版,因为比较小,点进去发现直接是源码,不用复制,这时候按CTRL+S保存即可.解压之后只需三步:1.导入...

2018-07-13 22:16:16 731

原创 媒体查询,响应式页面

 对于移动端页面,有两种实现方案:    1,网站PC端页面和移动端页面完全分开做,根据用户的访问设备类型,给用户返回不同的页面(目前国内大多数网站采用的都是此方案)。    2,响应式页面布局,页面本身能够根据浏览器窗口的宽度进行不同的布局,在宽屏幕上显示一种布局,在移动端窄屏幕上显示另一种布局。分开做就是做两个完全不相同的页面,所以记一下媒体查询媒体查询,响应式布局像bootstrap这种框架...

2018-07-13 21:59:55 722

原创 viewport视口

viewport视口每次在写代码时,都会用vscode生成html代码时,都会有一句&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;这段是viewport视口设置,如果没有的话手机浏览网页就会自动缩放文本,设置之后你写的网页就会原原本本的显示出来比较官方一点的说明是:默认情况下,移动端浏览器打开...

2018-07-13 21:43:51 377

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除