07 2019 档案
摘要：最简单的解决办法就是不用padding-left,改用text-indent: 例如 text-indent: 30px 我们使用padding-left，但是会有个问题，使用之后文本框也变长了，这就不是我们想要的效果了 我们要先写box-sizing:border-box; box-sizing:
阅读全文
摘要：First：<label>的说明：1、<label>标签为input元素定义标注（标识）2、label元素不会像用户呈现任何特殊的效果，仅作为显示扩展：不过，它为鼠标用户改进了可用性。如果您在label元素内点击文本，就会触发此控件。就是说，当用户选择该标签是，浏 览器就会自动将焦点转到和标签相关的
阅读全文
摘要：◎Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数； ◎Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数； ◎Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则)。 总结: 所有介于25和2
阅读全文
摘要：转自：https://www.cnblogs.com/liugang-vip/p/5616484.html 概述： 那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网
阅读全文
摘要：document.querySelectorAll兼容性良好，在之前的项目中就其遍历方式出了错误，先做个小结: 1.for循环 传统遍历方法 2.forEach方法 forEach方法可以遍历一个js数组 var arr= [1, 2, 3]; arr.forEach(arr, function(p
阅读全文
摘要：定义： querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 语法 document.querySelec
阅读全文
摘要：1、获取选中select的value和text,html 通过以下script代码s来获取选中的value和text 2、运用new Option("文本","值")方法添加选项option 3、删除所有选项option 4、删除选中选项option 5、修改选中选项option 6、删除selec
阅读全文
摘要：相同点： 1.都是循环遍历数组中的每一项 2.每次执行匿名函数都支持三个参数，参数分别为item（当前每一项），index（索引值），arr（原数组） 3.匿名函数中的this都是指向window 4.只能遍历数组 不同点： map（） map方法返回一个新的数组，数组中的元素为原始数组调用函数处理
阅读全文
摘要：map定义和方法 map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。 map()方法按照原始数组元素顺序依次处理元素。 注意： map不会对空数组进行检测 map不会改变原始数组 arr.map(function(currentValue，index，arr),thisVa
阅读全文
摘要：1、什么是数组 数组就是一组数据的集合 其表现形式就是内存中的一段连续的内存地址 数组名称其实就是连续内存地址的首地址 2、关于js中的数组特点 数组定义时无需指定数据类型 数组定义时可以无需指定数组长度 数组可以存储任何数据类型的数据（比如说一个元素保存整型，一个元素保存字符串型，这个在JS中是可
阅读全文
摘要：在网页中拖动时，会引起某些文字或一些内容被选中，导致网页中蓝蓝的一片，视觉效果很差，所以我加了个1.document.onselectstart=function(){return false;}或者 2.document.onselectstart = new Function("event.re
阅读全文
摘要：偏移量(offset dimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。当然，还有一个偏移参照——定位父级offsetParent。本文将详细介绍该部分内容 定位父级
阅读全文
摘要：HTML 在线演示：national-cities-three-linkage
阅读全文
摘要：1、变量声明const和let es6之前，变量声明使用var关键字；无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升 es6中通常使用const和let来声明变量，let表示变量、const表示常量。let和const都是块级作用域。 let的作
阅读全文
摘要：var是声明全局的变量，作用域是全局，const是声明全局的常量，不能修改,而 let 是块级变量只在当前声明的作用域中生效: // 直接打印a的值，文件中没有声明a console.log(a);// 报错：Uncaught ReferenceError: a is not defined 因为代
阅读全文
摘要：每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下： clientHeight: 元素可
阅读全文
摘要：假设 obj 为某个 HTML 控件。obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。 obj.offsetRight 指 obj 距离右方或上层控件的位置，整型，单位像素。 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 ob
阅读全文
摘要：clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute 的元素。 <top> 和 <bottom> 指定相对于盒子上边框边界 的偏移，<right> 和 <left> 指定了相对于盒子左边框边界 的偏移。<top>， <right>， <bottom>
阅读全文
摘要：1、什么是重绘与回流 Render tree 的重新构建就叫回流。当布局和几何属性改变时就需要回流，鼠标移动到图片 图片变大 也会触发回流。回流 能避免就避免 Render tree 改变外观、风格 而不影响布局的时候，就叫重绘 重绘与回流的关系：回流会引起重绘 重绘不一定会引起回流 2、避免重绘回
阅读全文
摘要：前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form表单和input标签 什么是表单？？？表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入信
阅读全文
摘要：通常表单的提交有两种方式，一是直接通过html的form提交，代码如下： 但有时候我们会出于安全角度考虑，给用户输入的密码进行加密，方法一就没办法解决这个问题，这时候我们同常会选择另一种方法，使用javaScript来进行表单提交，代码入下： 这种方法有个缺点就是，打乱正常的表单提交程序，通常用户输
阅读全文
摘要：1：datalist元素，一般与input组建配合使用，以定义可能输入的值，例如： 可自行复制运行。 2：placeholder定义出现在输入框内的提示文本 3:required的属性，检测输入框内是否有内容。 4：autocomplete保护用户敏感信息，如：输入密码的时候不进行显示。 5：下列代
阅读全文
摘要：使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求， 这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了
阅读全文
摘要：原理 css盒模型 一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.– 调整宽度大小可以调节三角形形状. 示例1 一般情况下, 我们设置盒子的宽高度,
阅读全文
摘要：结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 示例演示 通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。 HTML代
阅读全文
摘要：面是用JS简单地实现选项卡功能的实例。 注意点：（1）闭包后，要使用立即执行函数； （2）绑定事件注意参数； （3）思路：将当前div显示，其余隐藏，给button绑定事件，触碰后显示相应内容。
阅读全文
摘要：复选框为checkbox对象 通过input就可以将一个简单的复选框呈现在页面上 要实现的大概就是这样一个页面 思路 全选 因为要得到复选框数组，而id又不能重复。所以通过name来得到复选框数组。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同 反选 同样的方法得到
阅读全文
摘要：学到了原声js改变input的disabled的属性值，因为想让倒计时结束的同时，抢购按钮可以被点击。代码为：document.getElementById("buy").disabled = "";或者disabled的值为false也可以。
阅读全文
摘要：思路： *得到当前时间 var date = new Date(); //格式化为本地时间 var d1 = date.toLocaleString(); *使页面每秒显示一次时间 setInterval() 定时器实现 *显示到页面 获取div标签并将时间写入 代码：
阅读全文
摘要：Web的中文就是网络的意思，网站。而网站分为前端和后端，通俗上说前端就是做网页，界面，特效，交互。打开一个网页，我们眼睛可以看到的东西都可以说是前端，这个就是前端需要做的。 下面是我总结的新手学习路线，大家可以参考一下： 第一阶段： 在第一阶段中，也就是我们常见的HTML+CSS，最简单的东西，在我
阅读全文
摘要：核心思想 随机产生规定范围内的整数，然后再产生相同范围内的整数，两者相同时，则暂停。 所用知识 Math.random() * num: 产生从0到num的随机数 Math.floor(): 向下取整 简单的DOM操作等 技术扩展 扩展人数 添加停止键等 效果 代码如下 html: 1 <div c
阅读全文
摘要：1 2 3 4 5 6 7 8 9 Document 10 11 54 55 56 57 58 59 60 61 188 189 190 191
阅读全文
摘要：一，js换肤的基本原理 基本原理很简单，就是使用 JS 切换对应的 CSS 样式表文件。例如导航网站 Hao123 的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外，通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤，这样下次用户访问的时候，就可以自动使用上次用户配置的选项
阅读全文
摘要：】把元素的position属性设定为relative、absolute或fixed后，继而可以使用TRBL属性，相对于另一个元素移动该元素的位置。这里的“另一个元素”，就是该元素的定位上下文。 绝对定位元素的默认上下文是body。然而绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要把相应的祖
阅读全文
摘要：层叠的意思就是“继承”、“权重”、“覆盖”，通过良好的层级命名更好的实现效果，更少的代码，更多的功能，下面为大家详细介绍下，感兴趣的朋友不要错过 解答一： 层叠指的是样式的优先级，当产生冲突时以优先级高的为准。1. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）2. id选择
阅读全文
摘要：js控制隔行变色 编号 作品 时间 1 回忆三部曲 ...
阅读全文
摘要：css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。 但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。 一、概念： 1.定义 从
阅读全文
摘要：CSS3的nth-child() 选择器(兼容性不好)，在做表格偶数行变色的时候，我通常在绑定的时候，做一个js判断，来加一个css，从而使表格偶数行和奇数行颜色不一样。这样的兼容性很好。 但是最近在做手机网站的时候，由于手机网站对浏览器兼容要求相对较低，手机浏览器大部分都支持css3，这就大大提高
阅读全文
摘要：细心的人可能发现了，写的导航条中存在一个问题，那就是使用了float之后，父级盒子的高度变为0了。 我们来写一个例子来看一下，创建一个父级div，并设置border属性，然后下边创建两个子元素span，并设置浮动。具体代码如下所示： 由上图可以看出，在给span添加了float之后，父级元素div的
阅读全文
摘要：HTML5, CSS3 以及其他相关技术例如 Canvas、WebSocket 等等将 Web 应用开发带到了一个新的高度。 该技术通过组合 HTML、CSS 和 JavaScript 可以开发出桌面应用具有的效果。 尽管 HTML5 承诺很多，但现实中对 HTML5 支持的浏览器以及 HTML5
阅读全文
摘要：1. flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现 HTML代码： CSS代码： 2. 用flex布局制作导航栏 以前在写导航栏的时候，总是用float或者display：inline-block实现，但是这两
阅读全文
摘要：先看上面的代码，解释一下意思，看你能认识多少（后面有注释）： 1，什么是主轴，什么是交叉轴？ 下面就给你解释一下上面的问题，咱们先看图： 1，水平主轴就是图中的（main axis）线标出的 2，垂直交叉轴就是（cross axis）线标出的 那其他的又是什么？ 看下面的全部解释： 容器默认存在两根
阅读全文
摘要：一. input type属性 以下是Firefox显示效果(每个浏览器上的默认显示效果不同,可以通过css修改统一样式) 二. 其他新增属性： 1. placeholder placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点
阅读全文
摘要：搜索框中我们输入一些字或者字母，为何下面就会有一些自动补齐的相关搜索，比如我在搜索输入框中输入一个字母e，下面就会出现饿了么，e租宝，ems等相关的搜索链接。然后经过百度，发现原来很多厂商的服务器早已经为我们弄好了。 我们只需要写个输入框，然后获取输入框里的信息，将信息打包，请求服务器，然后获取数据
阅读全文
摘要：document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的； 1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身) 2） outerHTML设置
阅读全文
摘要：word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。 它们的区别就在于：1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulatio
阅读全文
摘要：首先给大家看一看js图片轮播效果，如下图 具体思路： 一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index 二、添加定时器，每隔2秒钟index递增一次、调用一次切换图片函数 提示: 1、 index不能一直无限制的递增下去，需做判断，
阅读全文
摘要：在javascritp中，我们可以通过style属性可以控制元素的样式，从而实现行为层通过DOM的style属性去干预显示层显示的目标，但是这种方法是不好的，而且为了实现通过DOM脚本设置的样式，你不得不花时间去研究javascrip函数，去寻找对应修改和设置样式的有关语句。而且每次修改和添加JS脚
阅读全文
摘要：网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧！ 下面贴HTML代码，大体分两部分，图片div和按钮div，代码很容易看懂~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <scri
阅读全文
摘要：function $(id) { return typeof id "string" ? document.getElementById(id) : id; } function $(id) { return typeof id "string" ? document.getElementById(
阅读全文
摘要：https://blog.csdn.net/alokka/article/details/73929510 alokka的博客 https://me.csdn.net/m0_37727198 lvzekun-IT https://blog.csdn.net/qianqian_blog/article
阅读全文
摘要：在Jquery里面，我们知道入口函数有两种写法:$(function(){}) 和$(document).ready(function(){}) 作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。 重点内容 1.执行时间 2.编写
阅读全文
摘要：如果要防止内容把div容器或者表格撑大，可以在CSS中设置一、overflow: hidden; 表示如果内容超出容器大小，就把超出部分隐藏(相当于切掉)二、overflow: scroll; 这个表示给内容加上控制滑块，可以在容器内部拖动它查看，而不把容器撑大(相当于窗体上的控制滑块) 当一个元素
阅读全文
