前端学习笔记
是个小太阳啊
这个作者很懒,什么都没留下…
展开
-
实现 表格填充 随机数与随机颜色
代码如下:用rgb()函数,里面填充的数字为十进制第二种颜色实现转成16进制时注意 类似于 05 进制转换后会只剩下5 表示16进制的颜色数 会不足6位。...原创 2019-04-11 14:48:22 · 993 阅读 · 0 评论 -
事件
1.JavaScript和html的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定交互瞬间。2.事件驱动模型:由事件的发生来触发程序的执行。常见的事件 1.0 鼠标事件:ps:onmouseenter 事件类似于onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。onmouseleave 事件类似于onmouseo...原创 2019-04-19 21:39:36 · 105 阅读 · 0 评论 -
鼠标拖拽相关例题 --- 实现简单的拖拽效果
1.0效果图 ,鼠标按下移动时div跟随鼠标移动,当鼠标被松开时停止,但是当鼠标离开浏览器页面时,div最多到达边界需要计算的值为:代码实现:...原创 2019-04-19 22:06:46 · 192 阅读 · 0 评论 -
第一次周考题目
1. DOM节点层次问题:nodeName 和 nodeValue 1.0 Document 类型 nodeName 的值为 "#document" ,nodeValue 的值为 : null 2.0 Element 类型 (元素节点) nodeName 的值为元素的标签名 , nodeValue 的值为 : null...原创 2019-04-24 21:28:02 · 184 阅读 · 0 评论 -
JavaScript 模块化
向大牛学习http://www.ruanyifeng.com/blog/2012/11/require_js.html1.模块就是实现特定功能的一组方法。可以用过加载写好的模块,实现特定的功能2.模块的编写方法:(1)ECMA6 中的新语法实现模块化(目前只有chrome浏览器支持):<script type = "module">//......</s...转载 2019-05-18 10:35:56 · 67 阅读 · 0 评论 -
npm脚本
npm就是Node.js的包管理工具,应用这个包管理工具可以使用别人写好的JavaScript·代码,只需将npm官网上已经打包好的模块通过npm安装就可以直接使用1.概念npm允许在 package.json文件里使用scripts字段定义脚本命令。 eg:上面为package.json里面的一个片段,里面的scripts字段为一个对象,它的每一个属性对应一段脚本。使用 npn ...原创 2019-06-20 11:11:28 · 1315 阅读 · 0 评论 -
M站
1.前后端架构- 前后端分离:前端后端两套分支,前端通过http请求后端接口,后端只关注接口开发,通过 index.html / index.php 来和前端对接- 前端架构RMVC + gulp + 模块化(CommonJS,ES Module) + sass + 前端模板 +UI框架 + JS库2.gulp- 启动server --> gulp-webser...原创 2019-06-20 11:12:01 · 906 阅读 · 0 评论 -
Express 脚手架
1.初始化详见: http://www.expressjs.com.cn/starter/generator.html 使用express-generator生成器可以快速创建一个应用的骨架。2. 通过生成器创建的应用一般都有如下目录结构:详见:https://www.jianshu.com/p/b555ba6f4067...转载 2019-06-20 11:45:20 · 727 阅读 · 0 评论 -
信息管理系统
零、 架构1. 前后端分离的架构2. http(s)- ajax3.接口- url- request(header,body)- response(header,body<json>)- type(get,post,put,patch,delete)- content-type(formdata,json)4.mock- http-proxy-middlewar...原创 2019-06-21 09:47:08 · 305 阅读 · 0 评论 -
2019-06-25 Vue.js
2019-06-251.Vue.js 是一套用于构建用户界面的渐进式JavaScript框架,它是数据驱动的,无须进行手工操作DOM。2.引入: 可以通过script标签引入,下载并引入。3.MVVM模式(Model-View-ViewModel) 3.1定义View vue.js采用声明式渲染,允许采用简洁的模板语法来声明式地将数据渲染进DOM.这将数...转载 2019-06-27 19:15:01 · 163 阅读 · 0 评论 -
2019-06-26 Vue.js
2019-06-26一、 计算属性和侦听器模板内可以写表达式,但是在模板中放入太多的逻辑会让模板过重且难以维护,所以当涉及到复杂的逻辑运算时,应当使用计算属性。 1.计算属性 计算属性写computed属性中。eg: 在下图代码中,我们声明了一个计算属性 reverseText,使用计算属性时像绑定普通属性一样在模板中绑定计算属性即可。 计算属性...转载 2019-06-26 22:31:52 · 127 阅读 · 0 评论 -
Vue 单向数据流和数据双向绑定
一、单向数据流 --- 只能从一个方向修改数据 数据从父组件传给子组件,只能单向绑定,子组件对父组件的数据只能访问不能修改。 父组件通过props传递数据给子组件,父组件是不能是直接访问子组件的数据的。二 、 数据双向绑定原理 1. vue.js 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属...原创 2019-09-01 21:50:09 · 891 阅读 · 0 评论 -
CSS3选择器
1.css3 有哪些选择器- 基本选择器- 层次选择器- 动态伪类选择器目标伪类选择器:语言伪类选择器-- UI元素状态伪类选择器-- 结构伪类选择器举个例子:对n的具体解释:-- 否定伪类选择器-- 伪元素-- 属性选择器...原创 2019-08-08 14:54:30 · 140 阅读 · 0 评论 -
Object.values() 和 数组的 some()方法
1.Object.values() (Object函数的方法) -- 返回一个数组eg:2.数组的 some()方法原创 2019-04-22 19:53:02 · 1752 阅读 · 0 评论 -
用JS实现 输入框的默认值
用JS实现 输入框的默认值实现效果:初始状态 ---------->输入文本内容时 ----------->清除文本内容后代码实现:原创 2019-04-16 20:21:09 · 6102 阅读 · 1 评论 -
04-02 实现单行文本居中,多行文本左对齐
实现单行文本居中,多行文本左对齐都不能写给内联元素,只能写给块状元素;text-align属性:right/center/left;(只能对内联元素起作用)text-indent属性:...原创 2019-04-02 10:51:22 · 464 阅读 · 0 评论 -
溢出文字和滚动条实例
初始效果鼠标划过时效果代码实现如下:html部分:css代码hover时可将文字大小设为0,可实现多余文字消失原创 2019-03-30 23:09:04 · 190 阅读 · 0 评论 -
浮动和文本溢出
一、浮动浮动属性Float:none/left/right;一个元素设置float:left/right;时会脱离文档流(半脱离),不占空间清除浮动 clear:none/left/right/both;none:默认值。允许两边都可以有浮动对象left:清除左浮动/不允许左边有浮动对象right : 清除右浮动/不允许右边有浮动对象both : 清除两端浮动...原创 2019-03-30 22:54:02 · 281 阅读 · 0 评论 -
字符串练习题 --- 字符串的过滤(还存在较多问题)
eg: 过滤掉敏感词汇css部分:html部分JS部分:运行结果如下:原创 2019-04-15 20:05:22 · 155 阅读 · 0 评论 -
字符串
1.定义方式 1.0 使用常量定义字符串 var str = "abc"; // 创建一个字符串, String类型 2.0 使用new关键字 var str = new String("abc"); // 创建一个对象,为 object类型eg: 两者的不同PS:基本数据类型的字符串,也可以调用所有字符串已有的方法2.字符串的遍历和修改...原创 2019-04-15 20:26:34 · 127 阅读 · 0 评论 -
字符串练习题-------用户名校验
题目要求:账号长度在6,20之间, 数字不能开头, 只能使用数字字母下划线$组成原创 2019-04-15 20:09:48 · 444 阅读 · 0 评论 -
字符串练习 ---- 密码强度校验
html+cssjs部分:运行结果如下:初始原创 2019-04-15 20:26:14 · 156 阅读 · 0 评论 -
把非数值转换为数值的函数:Number(),parseInt(),parseFloat()
Number()可以用于任何数据类型。而parseInt(),parseFloat()专门用于把字符串转换为数值1.Number()的转换规则1.0 Boolean,true 和 false 将分别被转为1 和 02.0数字值,则只是简单的传入和返回3.0null值,返回04.0 undefined,返回 NaN5.0 如果是字符串: 1.如果字符...原创 2019-04-09 08:49:20 · 1197 阅读 · 0 评论 -
JavaScript基础课01(2019-04-08)
1.JavaScript ------- 是一个面向对象的跨平台脚本语言跨平台:脚本:HTML文件必须在浏览器里执行,JS文件必须嵌入到HTML文件里才能执行凡是不能独立执行需要依赖其他程序的,通常都叫做脚本2.常见的转义字符document.write("\t"); //tab键document.write("\n"); //换行d...原创 2019-04-08 21:47:47 · 137 阅读 · 0 评论 -
JS课下作业
原创 2019-04-08 21:48:19 · 238 阅读 · 0 评论 -
排序
1.0 数组的默认排序(效率比较低,基本不用)2.0冒泡排序算法 --- 相邻的两两比较,每次都能选出当前未排序序列中的最大值代码实现如下:输出结果如下:3.0选择排序算法 ---- 从当前数组的第一个值开始依次与后面的元素进行比较,每次都能选出当前未排序序列当中最小的值代码实现如下优化编写swap函数,必须要把数组传进去4.0快...原创 2019-04-12 19:57:28 · 63 阅读 · 0 评论 -
Date ----数码时钟
呈现效果: 获取当前时间,并且显示效果与时间对应着变化 代码实现:打印imgs可以看到,imgs为一个数组,且元素为 img标签...原创 2019-04-16 14:18:07 · 150 阅读 · 0 评论 -
Date -- 实现简易进度条
计时器和控制计时器的结束实现简易进度条实现效果:1.0 初始时为02.0 进度条与数字同步变化 3.0 达到100%时停止html和css代码如下:JS代码 ---- 利用ssetInterval()函数来控制进度条的变化,clearInterval()控制计时器的结束...原创 2019-04-16 20:02:22 · 187 阅读 · 0 评论 -
Date -- 实现倒计时
倒计时:实现效果如下:(根据时间变化而变化)-------》原创 2019-04-16 20:04:52 · 339 阅读 · 0 评论 -
Date ----- 验证码的生成(简易版)
生成含有字母和数字的验证码:实现效果如下:每一次生成不同的验证码 代码实现如下:原创 2019-04-16 20:15:39 · 130 阅读 · 0 评论 -
数组的属性和方法
1. Array 对象属性:-- constructor: 返回对 创建此对象的数组函数的引用-- length: 设置或返回数组中元素的数目(length属性不是只读的)-- prototype : 向对象添加属性和方法2. Array 对象方法 -- 栈方法: push() 可以接收任意数量的参数,把他们逐个添加到数组末尾,并返回修改后数组的...原创 2019-08-07 15:38:27 · 1302 阅读 · 0 评论