- 博客(29)
- 收藏
- 关注
RSS订阅原创 Js新闻滚动小案例
新闻滚动小案例：把第一个放在最后的位置此代码重点：list.appendChild(list.children[0]);js部分：var view = document.getElementById("view"); var list = document.getElementById("list"); function nextPage(){ $_an...
2019-12-23 15:37:14
253
原创 Js无缝轮播图
无缝轮播一：（精准版）Js部分：// 获得元素 var slider = document.getElementById("slider"); var ul = slider.children[0].children[0]; // var ullis = ul.children; //所有的li // 1、动态复制最后一张图 ul.appendCh...
2019-12-21 14:26:33
183
原创 js动画（封装）
js动画应用1.凡是可以看到过渡效果的基本都可以用到js动画2.在一些库中有东阿虎方法封装。例如jq vue 都有3.常用：轮播，无缝轮播，滚动联动 图片放大变小过渡，…主要通过setInterval 实现的用css 动画融合js 实现动画ani动画方法封装方式1.给哪个元素绑定动画 el1.1 获取一下元素对象2.这个元素移动的位移是多少 st2.1 当前的位置...
2019-12-21 14:19:42
235
原创 密码验证（正则）
用正则验证登录密码思路：1.先验证内容是否合法2.在合法前提下，处理长度问题3.在满足合法；长度满足前提下，在处理强度问题div 部分：<div class="box"> <input type="password"><span></span> <div> <butt...
2019-12-21 14:16:42
1897
原创 正则
正则http://regexper.com修饰符g: 全局匹配可以匹配到 0- 多个结果i: 匹配大小写m 多行收缩元字符正则表达式有两种基本字符 元字符 原义文本字符原义概念：表示代表本来文本的字符；元字符：再正则表达式中有特殊意义的字符.* + ? $ ^ | \ () {} [] \n \d \w \r\ Q \f \b \cX…[] 或 字符类；将一堆字符放在...
2019-12-21 14:14:45
291
原创 Js四级联动(下拉框选择地区)
数据与视图如何根据数据渲染视图思路?1:了解已知的数据接结构2: 知到你要的数据是什么3: 知道你的页面结构是什么？4: 想办法拿到你想要的数据；方式有：数组对象的遍历；数组内置API 字符拼API 字符串变数组；数组变字符串，等基本操作。5：看数据获取到的数据与你搭建的页面结构是否符合？6：让你获取的数据与你搭建的页面结构相吻合。想办法：处理数据或者调整html结构 实现样式7...
2019-12-21 14:00:08
2027
2
原创 函数（回调函数、函数作用域、练习）
函数1：定义：function2: 函数分类：有名 无名3：参数：形参 实参4：执行：函数名()5: 实参数集合：arguments 伪数组变真数组 []…arguments]参数参数可以是js 任意数据类型*** 当参数为函数时候，那么该函数叫回调函数1：回调函数是异步程序。回调函数/** * 异步什么时候开始的 * 异步执行完毕了 * 告诉外...
2019-12-21 13:55:11
406
原创 数组（最大最小值、排序、去重、api遍历）
数组中内置api用途：处理复杂的数据结构。对象数组 字符串组合难点：数据打乱重组1: 对数据的基本操作；数组基本操作（增删改查） 对象基本操作 字符串基本操作（拼接 替换 删除 切割 截取…）数组基本操作1：查 --> 获取数组中的数据 arr[index] for…获取所有获取第一个 arr[0]获取最后一个 arr[arr.length-1]获取倒数第二...
2019-12-21 13:32:09
256
原创 Js--点击收藏小案例
Js–点击收藏小案例用Js实现点击收藏效果，且在原有收藏量基础上增减思路：点击收藏时设置想要的样式以及数量增1相反 点击取消收藏 将数量减1废话不多说，干货如下（具体详解在代码处）：Js 代码实现var heart = document.getElementsByClassName("icon-xin"); var span = document.getElementsByCl...
2019-12-11 15:55:17
1523
原创 JS----预编译及变量提升详解
JS----预编译及变量提升详解JS属于解释型语言，在执行过程中顺序执行，但是会分块先预编译然后才执行。因此在JS中存在一种变量提升的现象。搞懂预编译环节，变量提升自然而然也就懂了。本文讲围绕以下几点进行介绍（变量提升会穿插在其中讲解）：预编译执行步骤示例演示预编译执行步骤预编译发生在函数执行的前一刻，过程如下：创建AO对象，执行期上下文（后面更新关于执行期上下文详解）。寻找函数的形...
2019-11-30 14:12:11
448
2
原创 Js作用域简单认识
Js作用域简单认识变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。var n=999;function f1(){ alert(n); }f1(); // 999另一方面，在函数外部自然无法读取函数内的局部变量。Js代码function f1(){ var n=999; }alert(n...
2019-11-30 14:04:49
143
原创 Js-常用的内置对象（API）
js学习—常用的内置对象（API）小结 ：内置对象(API)：日期Date:getFullYear() 返回完整的4位的年份 如：2016getMonth() 返回月份，从0开始getDate() 返回当前月的第几天,当月的几号getHours() 返回0-23的小时数字getMinutes() 返回0-59的分钟数字getSeconds() 返回0-59的秒...
2019-11-28 11:47:27
445
原创 css Table布局-display:table
使用表格布局一直是一个敏感的主题。一般情况下，Web开发人员考虑基于表格布局是禁忌。 尽管反对的理由看起来证据很充分，但是大多数开发者除了谴责基于表格的布局，都无法提供完善的使用场景。 “表格不好。” 从早期反对HTML Table（<table>标签）开始这种势头就非常强劲。 几代开发者被成功洗脑，根深蒂固的认为：任何使用表格都是邪恶的。 诚然，我也是避免使用...
2019-11-22 16:58:02
727
原创 JavaScript（入门）
JavaScript（入门）JavaScript：- 是运行在客户端的网页编程语言，是基于对象和事件驱动并具安全性脚本语言。Js组成：ECMAScript Js标准DOM 通过Js操作网页BOM 通过api操作浏览器Js特点：1.解释执行2.动态语言3.基于对象- 面向过程4.具有跨平台性 ，依赖于浏览器本身5.安全性和简单性Js运行顺序：-...
2019-11-22 02:06:51
170
原创 炫酷的太阳系（html+css）
炫酷的太阳@keyframes rotate{ from{ transform: rotate(0deg); } to{ transform: rotate(-360deg); } } *{ margin: 0; padding: 0;...
2019-11-22 01:24:34
952
原创 Js中的多行注释与快捷键
Js中的多行注释与快捷键添加必要的注释，对一个有责任心、有道德模范的前端必须具备的好习惯，可以大大提高代码的可维护性、可读性。java代码注释快捷键：ctrl+shift+/首先熟悉一下html、css、js的注释的写法：1、HTML注释语法：2、css注释语法/* 注释内容 // ----------文字样式开始---------- */3、javaScript注释//注释内...
2019-11-15 21:13:17
4450
原创 禁止对文本操作的属性
禁止对文本操作的属性禁止鼠标右键：οncοntextmenu=“return false”；禁止选择：onselectstart=“return false”；禁止拖放：οndragstart=“return false”；禁止拷贝：οncοpy=document.selection.empty() 。禁止复制：oncopy = “return false”；禁止保存：，放在head里...
2019-11-15 09:41:25
253
原创 转换、过渡、动画（css属性）、媒体查询
标题转换、过渡、动画（css属性）。。。无透视，不3D转换：transform translate(X轴,Y轴) -------平移效果 scale(X轴，Y轴) --------放大或者缩小 rotate(角度) -------旋转 skew(X轴，Y轴) -----------倾斜transform-origin() -------以某个原点进行转化pe...
2019-11-09 15:21:54
255
原创 弹性布局
四种布局方式：流式布局（默认）浮动定位弹性布局弹性布局伸缩盒flex：（新版本）display:flex flex-direction 所有子项如何在flex不居中排列 row 横向左对齐 row-reverse 横向右对齐 column 纵向上对齐 column-reverse ...
2019-11-09 15:15:44
230
原创 栅格系统
栅格系统1：栅格应用的是，媒体查询技术2.间隔一个容器等分为12小分3.应用在布局上原理：主要是通过设置元素的宽度完成，文卫为百分比：当一个元素只有一个col-xx时候；不看尺寸，只看元素宽度；例如：col-xx-12宽度为100%当一个元素有多个col-xx，先看【屏幕尺寸】，再看元素宽度 ；例如：col-xx-6宽度为50%栅格大类：.col尺寸划分.col-xs &...
2019-11-09 14:22:16
255
原创 css设置流光文字样式
css设置流光文字样式主要属性：-webkit-background-clip：text 表示元素的背景保留在前景内容中（文字） 和其形状大小相同-webkit-text-fill-color:transparent代码如下： .border-wrap{ width:180px; height:150px; position:absolute; left...
2019-11-09 13:06:56
626
原创 前端零碎小知识整理
前端零碎小知识整理不废话，直接干货：绝对居中：position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);如果设置了定宽：直接反方向平移宽高的一半。em、rem、px、%、vm、vh：1.% 相对于父元素2.em 需要先设置父元素的“font-size” ， 他的值：为参考单位 默认1em = 1...
2019-11-09 11:57:37
127
原创 写组件的小感悟
首先： 为有效管理已开发的软件组件,给出一种组件库的描述和检索策略. 通过定义结构合理的组件库,在优化组件信息描述性的基础上,应用相应的检索技术并结合结构化查询语言提高组件库的使用效率.针对复用环境的不同,采取相应 的组件描述与检索策略,加强并优化组件库的管理,能加快和完善组件库的建设工作.
2019-11-09 10:40:20
134
原创 理解 1% table-cell width
深入理解 1% table-cell width问题描述今天在使用Bootstrap给页面添加底部导航栏时，需要在手机下也使导航栏呈现水平排列的效果。最后在网上查找解决方法是，看到这样一个解决方法：.nav-justified > li { display: table-cell; width: 1%;}而且确实奏效了，但是代码很有意思，我便另外试了试，如果wid...
2019-11-04 20:53:26
235
原创 常用的HTML和CSS content属性特殊字符
常用的HTML和CSS content属性特殊字符 我们经常用到的CSS的content属性，...
2019-11-04 20:25:51
3464
1
原创 正方体旋转动画（2个小例子）
正方体旋转动画设置原理：第一个例子：1.用div先写出六个面2.通过旋转、平移方式将六个面组成正方体3.将父容器设成perspective透视，无透视，不3d4.设置立体旋转方向（要搞清楚绕着哪个轴旋转）此处旋转角度为90deg第二个例子：立体设置同上，主要是把父容器旋转，而不是分别将面旋转。另外：当面进行旋转的时候，他们会挤在一起，所以需要让每个面都要向他自身的前面走几步（假设...
2019-10-24 09:50:01
2463
原创 Css3圆形进度条
圆形进度条原理：1: 先设置一个进度容器：目的为了旋转；在容器中设置两个隐藏容器，分为左右：目的为了隐藏半圆； 再设置两个半圆边框：目的是容器再转动的时候慢慢显示出来2：让每个半圆边框；与进度条边框大小一致 超出隐藏容器的，3：让内容溢出部分 【隐藏】4：通过旋转；让半圆慢慢显示；5：左边的半圆 50%后开始 旋转 0%-50% 都处于【内容溢出（隐藏）】的位置先设置一个进度容器：目的...
2019-10-23 22:29:43
308
原创 前端学习笔记（html元素-01）
标题@TOC欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计 ，将会带...
2019-10-23 21:55:46
138
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人