前端学习
关注
分享
扫一扫
maid_04
这个作者很懒，什么都没留下…
展开
-
JavaScript的DOM属性
今天我想记录一下我对DOM属性的总结首先，先来认识一下什么是JS的DOM DOM 全称 Document Object Model ，中文名是 文档对象模型 文档：我们的html页面 文档对象：页面中的元素 文档对象模型：为了能够让程序–js去操作页面中的元素而定义的标准，通过 DOM，可访问 HTML 文档的所有元素接下来，就认识一下DOM的一些属性及一些对属原创 2017-12-10 10:36:57 · 341 阅读 · 0 评论 -
用HTML5自制视频控件
这两天学习了HTML5的视频音频，今天刚好完成了自制的视频控件。但是其中有一个小bug，音量只有最大和静音，，，，不过可以凑合看的，然后我今天晚上再试试写音量那块。。。HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link type="te原创 2017-12-17 17:23:08 · 2986 阅读 · 2 评论 -
CSS的自适应两栏/七种三栏布局
写本文主要是为了解决利用CSS的流体特性实现自适应的两栏/三栏布局#先来了解一下什么是BFC1.BFC的定义 全称Block Formatting Context，中文直译为块级格式上下文。BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。两个相邻的B原创 2017-12-07 00:12:53 · 762 阅读 · 0 评论 -
创建对象的七种方式
创建对象的第一种方式：工厂模式用函数来封装以特定接口创建对象的细节 function createPerson(name,age,job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){原创 2018-02-04 13:38:51 · 238 阅读 · 0 评论 -
关于this指向及其改变指向的问题
之前被学长问到过关于改变this指向的问题，但是没能完整的回答上来，所以今天就关于这个问题的再看了看1.关于this指向的问题，我用代码来描述<input type="button" value="button1"><input type="button" value="button2"><script> //原创 2017-12-21 23:56:24 · 341 阅读 · 0 评论 -
遍历html中所有DOM节点，并计算DOM节点数
这是一个我在面试中遇到的问题，之前从来没有想过这个问题，所以一被问就卡住了，当然结果也就是凉凉了….所以下来查了一下这个问题，并做以记录警戒自己// 定义一个空数组，存放或者取出制表位'\t'var blanks = [];// 遍历的函数主体function getChildren(parent){ // 按着HTML里的缩进把遍历的元素打印出来 // parent.node原创 2018-04-19 11:18:40 · 3511 阅读 · 0 评论 -
JS时间戳转换问题
今天工作中遇到了这个问题，以前没有好好研究过这个问题，今天看了之后其实没有多难，就是可能自己之前对Date对象理解不是很深刻吧1.将普通的时间格式转换成UTC时间戳 其实也就一行代码的事情，但是之前不知道哇，现在应该庆幸找实习的时候没有被问到这个问题，不然真的会死翘翘，如果没有遇到这个问题真的不知道JS还可以这么玩。。。1) new Date().getTime() 2) new Date原创 2018-04-27 19:16:56 · 597 阅读 · 0 评论 -
post表单提交form-data格式数据的具体实现方式
今天遇到这个问题了，因为我提交数据是json格式，然后服务端哥哥需要的是form-data格式，但是接口文档没有写，我就一直卡在数据请求这里。。。一直以为自己的问题，因为url没问题，可以请求道数据，但是请求的是错误信息，然后正确信息也一直不出现。。后来真的不知道哪里还有问题了，就厚着脸皮问了一下，结果问题竟然出在这里。。。好吧，既然你要的是form-data格式，那我就改咯，解决方式如下~get原创 2018-04-27 19:26:00 · 16487 阅读 · 2 评论 -
最简单的加载动效
纯CSS实现加载动效：一个小程序的加载页面(emmm….简单可依赖) HTML实现代码<view class='onloadPic'> <view></view> <view></view> <view></view></view> css实现代码原创 2018-05-15 10:21:36 · 2542 阅读 · 0 评论 -
设置height:100%;无效果的解决方法
用css设置样式时，width:100%会自动填满整个屏幕的宽度，所以觉得设置height:100%也会有同样的效果，但确实是被打脸了，设置height:100%时，只会自动适应子元素的高度，想要填充整个屏幕的高度，只给该元素设置height:100%是无法实现的。在正常的HTML中，要使该元素自动填充整个屏幕的高度，必须给他的所有父级元素也设置height：100%<h...原创 2018-05-15 10:35:50 · 2703 阅读 · 0 评论 -
vue项目中引入vue-datepicker插件
项目需求中有一个日期选择限制的功能点：今天之前不可选，周末不可选。 传统的input type='date无法做到，所以使用了这个插件来实现功能。引入vue-datepicker loader：npm install vue-datepicker引入moment loader：npm install moment --save 因为vue-datepicker是依赖v...原创 2018-05-31 15:23:10 · 18703 阅读 · 1 评论 -
汉字转拼音的原理
假设我们可以把所有汉字按拼音排序，比如按’A’, ‘AI’, ‘AN’, ‘ANG’, ‘AO’, ‘BA’,…,’ZUI’, ‘ZUN’, ‘ZUO’排序，那么，我们只需要记住每个相同拼音的汉字队列的第一个汉字就好了。那么，所需要的字典就会很小（覆盖所有拼音即可，拼音数量本身不多）ICU/本地化相关的API提供了这个排序API Intl.Collator API：Intl.Co...原创 2018-07-01 00:08:50 · 2726 阅读 · 0 评论 -
浅谈Ajax
今天想整理出我所理解的Ajax，可能不全，也可能不太对，但是这是现阶段所了解的ajax，若有新的发现，还会继续补充一：Ajax基础1. 什么是Ajax > 无刷新数据读取 > AJAX = 异步 JavaScript 和 XML。 > AJAX 是一种用于创建快速动态网页的技术。 > ajax能且仅能从服务器上读取文件信息 > 通过在后台与服务器进行少量原创 2017-12-07 16:06:38 · 303 阅读 · 0 评论 -
模拟键盘
因为刚更了键盘事件的内容，想到之前写的屏幕上的模拟键盘，就想发出来，，，可能写的不是很好，代码行还多，键盘上的字母字符也都不是动态生成，但是确实功能基本都能实现html部分<div id="all"> <input type="text" id="text1"><br> <div>`</div> <div>1</div> <div>2</div> <div>原创 2017-12-16 00:43:28 · 259 阅读 · 0 评论 -
CSS那点事-总结常用样式
一些简单的样式其实就可以不用剖出来代码就可以懂的，所以有些简单的样式我就不用剖出来代码进行说明了，因为已经学过并掌握觉得没必要写这么详细，觉得小白还是适合去看看教程什么的，我写的东西就是一些简单的记录与对所学内容的总结目录 1. 盒模型 2. 选择器 3. 常用的居中方法 4. 常用的清除浮动的方法 5. 设置元素透明的方式 6. 设置元素隐藏原创 2017-12-06 22:10:12 · 264 阅读 · 0 评论 -
详解web标准
WEB标准是一系列标准的集合，网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。原创 2017-12-02 14:48:04 · 628 阅读 · 0 评论 -
JS的事件(2)--事件函数的取消/事件默认行为/键盘事件/鼠标滚轮事件
这两天课设，也没有更博，没有学习新的知识，没有复习旧的知识，所以今天晚上有点空就想着把事件的第二部分完成，其中还应该有鼠标滚轮事件，但是今天晚上没有看到那块，所以就先更这一点，明天补齐1. 事件函数的取消//事件函数的取消 function fn1() { //先写一个简单的函数 alert(22222); } document.onclick = f原创 2017-12-16 00:33:24 · 1332 阅读 · 0 评论 -
编写选项卡
今天时间不够，就只做了一个小的特效，编写选项卡，这是之前写过的，但是过去很久了，所以重新回顾一下，然后今天在网上看到一个效果比较好看的选项卡，就想写个博客更出来实现效果如图 不会在博客里面插入动图，就只能一张图片一张图片的截，这样看的会更清楚 完整代码如下 实现过程都写在代码注释里css部分 <style type="text/css"> //css样式完成之后的布局效原创 2017-12-20 00:10:49 · 271 阅读 · 0 评论 -
JS的事件(1)--焦点事件/event事件/事件流
1. 焦点事件 - 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候，那么它就可以等待用户的输入 - 可以切换焦点的方法：1、点击；2、tab；3、javascript - 注意：不是所有元素都有焦点，能响应用户操作的元素才有焦点（如div就没有焦点，a就有焦点）//焦点事件的方法(1) focus() // 元素获得焦点，例如百度网页刷新之后会立即在搜索框获取焦点(原创 2017-12-11 18:47:21 · 1315 阅读 · 0 评论 -
CSS3的动画效果
1.2D变换 Transform(变形) rotate()旋转函数 取值度数 transform: rotate(30deg); skew() 倾斜函数 取值度数 transform: skew(30deg); scale()缩放函数 取值 正数、负数和小数 transform: scaleX(1.2) scal原创 2017-12-04 00:32:23 · 306 阅读 · 0 评论 -
JS的原型链
原型链：利用原型让一个引用类型继承另外一个引用类型的属性和方法 原型链是继承的主要方法简单讲一下构造函数，原型和实例的关系> 每一个函数都有一个原型对象，原型对象都包含一个指向自己的构造器指针，而实例都包含一个指向原型对象内部的指针。假如，我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另一个原型对象的指针，相应的，另一个原型中也包含着一个指向另一个构造函原创 2017-12-12 15:32:06 · 187 阅读 · 0 评论 -
CSS3的弹性盒模型
这是设计来实现更复杂的版面布局。其本质上就是Box-model的延伸， Box-model定义了一个元素的盒模型，而 Flexbox 更进一步的去规范了这些盒模型之间彼此的相对关系1.Flexible boxes盒子按照宽高分出了以下 8 点： 水平的主轴：main axis； 垂直的纵轴：cross axis；纵轴的开始位置和边框的交点：cross start；纵轴的结束位置和边框的交点原创 2017-12-04 12:24:50 · 3180 阅读 · 0 评论 -
HTML5新特性1(新表单控件/选择器/JSON/data)
1.HTML5新控件 其实新控件不难理解，一段代码足以说明HTML部分<form action="#"> <input type="email" /> //电子邮箱文本框，跟普通的没什么区别当输入不是邮箱的时候，验证通不过，移动端的键盘会有变化 <input type="tel" /> //电话号码 <input type="url" />原创 2017-12-06 00:16:47 · 813 阅读 · 0 评论 -
HTML5新特性2(拖放事件/历史管理/延时加载JS)
1.拖放事件 draggable ： 设置为true，元素就可以拖拽了 拖拽元素事件 : 事件对象为被拖拽元素 dragstart , 拖拽前触发 drag , 拖拽前和拖拽结束之间连续触发，与move的区别 dragend , 拖拽结束触发原创 2017-12-06 00:51:15 · 528 阅读 · 0 评论 -
JS实现歌词同步滚动效果
实现歌词同步滚动效果，首先要用audio标签引入音频<div id="h_center1"> <span>当前播放：</span> <span>大鱼海棠</span> <audio id="now_music" src="双笙 - 大鱼.mp3原创 2018-06-28 21:53:24 · 26507 阅读 · 4 评论