- 博客(30)
- 收藏
- 关注
RSS订阅原创 JS实现四级联动
html <select name="" id="province"></select> <select name="" id="city"> </select> <select name="" id="qu"> </select> <select name="" id="town"> &...
2019-12-24 20:26:36
949
原创 js实现终极无缝滚动轮播
感觉没有特别难得，也就动画的函数封装很有用，没有jQuery，里面$随便加的不要在意,css* {margin: 0;padding: 0;} #view { width: 200px; height: 300px; border: 2px solid red; overflow: hidden } ...
2019-12-24 20:18:44
145
原创 正则表达式大全
form表单验证正则表达式是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”）。模式描述在搜索文本时要匹配的一个或多个字符串。1.正则表达式基本语法两个特殊的符号’^‘和’$’。他们的作用是分别指出一个字符串的开始和结束。例子如下：“^The”：表示所有以"The"开始的字符串（“There”，"The cat"等）；“of despair"：表示所以...
2019-12-14 16:49:50
265
原创 js多选
Document<style> * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } span { vertica...
2019-12-13 19:07:48
98
原创 js写点名器
Document 开始点名 停止点名<script> var cname = [ "1", "2", "3", "4", "5", "6", "7", "8", "9" ]; var div = document....
2019-12-12 22:27:00
279
原创 轮播图
Document<!-- <div class="wraper"> <div class="score"> <img src="五角星(1).png" alt=""> <img src="五角星(1).png" alt=""> <img s...
2019-12-11 15:27:31
138
原创 递归实例解析
// 递归：自己的函数内部执行自己// 1：找规律；2：找出口// 有点：代码简单；精炼；弊端：运算量大 结果最后输出 // function fn(){ // // 递归；死循环 // fn() // } // function fn(n) { // var res = ++n; // console.log(r...
2019-12-07 11:20:29
96
原创 隐式转化[]==![]
console.log([] == ![]) // true???,咋回事这个是正确的，这就是数据类型隐式转化的魅力了，偷偷的就把你骗了献上验证过程：第一步：根据运算符的优先级，!先执行，[]是一个对象，所以![]转化为false第二步：根据类型转换规则第一条——“如果一个运算数是Boolean值，在检查相等性之前，把它转化成数字值。false转化成0，true转换为1。”。所以fals...
2019-12-07 10:58:21
113
原创 闭包，作用域与作用域链的关系，this
作用域链[scope]作用域是层作用包裹另一 层作用域σ从而形成作用域链，通过scope完成的作用域链导致了变量的使用规则。1:在自己的作用域中找，如果没有就去父域中找，直到找到全局作用域为止变量查找方式:1;先看声明，再看赋值，赋值使用就近原则注意:属性=值不是全局的,是变量赋值,不是声明因为在预编译阶段;window下没有这个属性，只有在解析执行的时候，才给window添加该属...
2019-12-07 10:55:14
413
原创 JS this关键词
this 是什么？JavaScript this 关键词指的是它所属的对象。它拥有不同的值，具体取决于它的使用位置：在方法中，this 指的是所有者对象。（此方法的拥有者）单独的情况下，this 指的是全局对象。在函数中，this 指的是全局对象。在 JavaScript 函数中，函数的拥有者默认绑定 this。因此，在函数中，this 指的是全局对象 [object Window...
2019-11-29 23:31:13
98
原创 对于JS的解析性语言的解释
JS是一门解析性语言其在执行 代码前要经过三个过程1.语法分析：浏览器会速度简单的浏览代码，看看你的代码是否有语法问 题，如果有，就报错2.预编译：这个下面说一下过程有点多，不过懂意思了，在自己脑子里多过几遍就差不多了3.解析执行预编译：在全局作用域中（最大的作用域），在执行代码前，1.创建GO（global Object）对象，2.把声明var 的变量，提升，赋值不提升...
2019-11-29 19:52:22
2545
原创 字符串内置方法解析
// 所有的 Number() String() Boolean() Object() Array() 都是可以将其他类型进行转化/**字符串对象特点：1：有序，有索引值；索引值从0开始到 长度-12：有长度 对象.length 获取字符串长度 字符串对象与字符串区别 1；相同点，都是字符串 都有长度 和索引值 构造函数都是String() 2：不同点：...
2019-11-29 19:25:48
121
原创 JS求质数
var a=0;//定义20以内质数的个数for (var i = 2; i <= 20; i++) {//8var flag = true;for (var j = 2; j < i; j++) { if (i % j == 0) { flag = false; }}if (flag == true) {console.log(i);a++;}}con...
2019-11-23 16:21:46
420
原创 JS求最大公约数和最小公倍数
求最大公约数和最小公倍数；// var a = prompt()// var b = prompt()// a = parseInt(a)// b = parseInt(b)// var x// if(a>=b){// for(n=0;n<b;n++){// if(b%(b-n)==0&am...
2019-11-23 15:06:19
758
原创 JS变量的解析
// 变量名一经声明就不可改变，值可以改变// =的作用：赋值// 变量的使用是读数据// 变量的作用是存储数据var a='b';console.log(typeof(a));//使用变量console.log('wode') //直接使用 数据，不存储到变量中，不保存/**变量赋值1.找到需要赋值的变量2.赋值不需要加var 直接变量名=值3.变量的赋值以最后一次赋值为准...
2019-11-23 15:05:11
235
原创 js的数据类型
写代码;1: 声明变量2: 用变量 1:用哪个 怎么用 3: 怎么改如何判断 一个单词 是数据还是变量1: 看是不是数据,如果是 一定会属于Js 的数据类型;2: 如果没有,一定是使用变量. 使用:增删除改查,3: 浏览器会往往上找;知道找到距离使用变量最近的一次赋值位置. 找不到就报错 xxx is not defined 找到了没辅助 undefined–>/...
2019-11-23 15:03:30
72
原创 css数组方法及应用
最重要的应该是sort()方法了，对数组进行排序可以以字母顺序，也可以按数字排序，但是数字排序需要一个方法，如果直接用你会发现100>20方法：points.sort(function(a, b){return a - b}); ，倒叙就是b-a了，当然这个方法不止排序这个功能，比如取最大值或者最小值了，直接取第一个元素或者最后一个元素。和之相反的是resever()，倒叙然后就是to...
2019-11-20 22:48:11
1678
原创 结构搭建思维
结构搭建思维1： 一个页面的结构；实际上是 一层一层的关系。也就是 盒子套盒子 注意问题：1：小盒子在大盒子中占地面积 ----> 区分是什么类型盒子border-box 边框盒子 = width * heightcontent-box 内容盒子 = (padding + border-width +width ) *(padding+border+height)...
2019-11-12 21:51:50
183
原创 对于过度的一些理解和看法
div{width: 100px;height: 100px;background-color: red;/* transition: all 5s; /transition-property: width,background-color;/ 作用的时间 /transition-duration: 2s ,5s;/ 延迟时间 /transition-delay: 1s;/设...
2019-11-09 16:56:12
155
原创 一些简单的开关样式
开关样式很简单和复选框差不多，也就改变了他的款和高以及弧度<input type="checkbox" class="switch">css：/* 必须是input为checkbox */ input[type="checkbox"]{ appearance: none; -webkit-appearance: no...
2019-11-09 16:31:28
165
原创 兼容移动端的导航栏
<nav class="navbar"> <div class="navbar-header"> <!-- 点击logo进入首页 --> <div class="navbar-logo"> <a href="#">logo</a> </div> ...
2019-11-09 16:28:20
140
原创 清除默认样式的解析
ul {list-style：none; } 如果不清楚默认样式则会向ul列表这样会出现不必要的东西所以我们要清除默认样式 /没有清除默认样式会使我们对编辑HTML更方便最简单的就是*{margin:o;padding:0;}然后就是 -webkit-appearance: none;-moz-appearance: none;大概就是浏览器有他默认的基础样式，比如Body的高度8p...
2019-11-09 16:26:35
156
原创 浅谈一些选择器的用法
在css中，选择器很重要，不管是css的基础样式还是写伪类或者其他选择器用的是否正确有很大的差别，因为很多元素能够继承，也有的不能继承，在父类或者子类里可能出现不同的效果，也有可能一点效果没有写css 样式另一个思路注意：如果有全局有关，可以提前设置css样式，或者封装ui组件库1.每个选择器都相当于一套简单的样式，本质上与html是独立，html是使用选择器来实现效果。2.首先写好通...
2019-11-09 16:17:00
97
原创 对于交叉轴的一些解析和认识
交叉轴：主轴垂直方向，默认垂直 起点上面设置元素在交叉轴上的对齐方式flex-start 默认值 交叉轴起点flex-end 交叉轴末端center 居中baseline 文本内容 基线对齐(文本对齐)stretch 子元素不设置高度，拉伸子元素高度到父元素内容高度</div> <style> .wraper {...
2019-11-09 16:11:37
2162
原创 内容溢出解决办法
.wrap{width: 300px;height: 300px;border: 3px solid red;overflow: auto;word-wrap: normal;/* 代码换行空格，也算空格 */white-space: pre;}<div class="wrap"> <p>我是内容000 ...
2019-11-09 16:08:50
195
原创 css隐藏元素方式
先附上css代码.box {width: 100px;height: 100px;background-color: red;} /* 隐藏元素 */ .hidden { width: 100px; height: 100px; background-color: #bfa; visibility: hidd...
2019-11-09 15:52:52
319
原创 圆形与方形复选框的写法(点击有勾)
一般的复选框基本很简单，现在在网上见到的基本没有那种类型的了，下面是我自己写的css和HTML代码，框大点好认，css代码有点多，是因为加了不少东西，见谅。html： css： .circle-check,.square-check{ display: inline-block;}.circle-check > inp...
2019-11-09 15:45:48
4085
原创 弹性布局方式以及对结构的构建
弹性布局方式兼容性：适用使用手机端，pc端 直接放弃(原因，项目需要兼容所有浏览器 IE10 以上可以考虑)重点：微信，微信小程序，各个小程序，优先弹性布局使用规则：找到父容器，给父容器设置dispaly:flex一旦容器变为flex布局，主轴和交叉轴就会存在(你用或者不用他都会存在那里)确定主轴方向，flex-direction 默认水平方向 从左往右——>决定子元素水...
2019-11-09 15:36:40
170
原创 浮动与清除浮动的方法
浮动float (兼容所有浏览器，性能好，比position:absolute好)1.浮动范围:只能在父容器中2.浮动后：块元素变成行内块3.浮动后：元素脱离文档流，原来的位置被其他元素占据4.浮动后：浮动元素占据一个[浮动位置]，仅针对同一个父容器，多个子元素右浮动属性5.问题：父容器高度为06.浮动 是布局的一种方式：也是元素脱离文档流的方式对于浮动差不多就是这么多了，那么重要的...
2019-11-09 15:34:31
87
原创 关于css盒模型的解析
盒模型原理：对所有的盒子，在浏览器中所占据的空间进行计算盒子：只要在浏览器中占据位置的元素，都是我们计算的盒子->inline inline-block block盒子模型使用什么计算盒子在浏览器中占据的位置width height border margin padding 盒子分类：边框盒子(IE默认)和 内容盒子(谷歌默认) 边框盒子在浏览器中占据空间 = ...
2019-11-09 15:24:57
144
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人