web前端

web前端知识汇总-浏览器兼容（主要IE）

1、不同浏览器的标签默认的外补丁和内补丁不同问题：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大解决方案：在CSS里设置*{margin:0;padding:0} 2、块属性标签float后，又设置了左右margin的情…

web前端知识总结-BOM和DOM

BOM：我们都知道JavaScript是运行在浏览器中的，所以JavaScript提供了一些列对象用于和浏览器窗口进行交互，这些对象主要包括window、document、location、navigator和screen等，通常统称为浏览器对象模型browser object model BOM …

CSS清除浮动的几种方法（有实例）

首先我们要说一下浮动带给我们的问题：如果父元素没有设定固定高度那么当子元素设置浮动时父元素不会被撑开，很明显这会影响我们的布局效果如下： 1、第一种方法：after伪元素（推荐使用） 给浮动元素的父元素…

网页头部图片自适应

就我目前接触到的头部图片PSD设计图里基本都是铺满的，实现的时候就会考虑到底怎么呈现一种想法是永远显示整张图片铺满屏幕宽度高度自适应 ； 另一种想法是图片大小固定永远居中显示并根据浏览器可视区域宽度对图片显示哪些部分进行设置当然&#xf…

JavaScript函数表达式

函数表达式是JavaScript中的一个既强大又容易令人困惑的特性。定义函数的方式有两种：一种是函数声明，另一种就是函数表达式。函数声明的语法： function 函数名(参数1,参数2,参数三){//函数体 } 首先是function关键字，然后是函数…

笔试遇到的题目，记录一下把arguments转换为数组的方法 console.log(arguments instanceof Array);//false var argsArrayArray.prototype.slice.call(arguments); console.log(argsArray instanceof Array);//true 方法就是Array.prototype.slice.call(argument…

记marquee滚动效果

_(:зゝ∠)_人生观受到冲击的marquee文字滚动效果就昨天帮人做的页面里要求有文字滚动效果，我首先想到marquee，然后用他写了一个简单的文字滚动，测试的时候除了IE，chrome和火狐这两个浏览器都木有显示效果。我就上网一查看到大家…

css里height:100%不起作用

做网页自适应的时候常用到height:100%想让div高度铺满屏幕，但发现常常不起作用，其实是要对html,body{height:100%;}设置，加上之后div的height:100%就能成功占屏幕的全部了。 html,body{width:100%;height:100%; }

读《精通JavaScript+jQuery》笔记二

//函数在执行过程中只要执行了return语句后便会停止继续执行函数体中的任何代码 //JavaScript函数代码中有个特殊对象arguments，无需明确指出参数的名称就能够直接访问他们 function sayName(){if(arguments[0]"bye"){alert("bye""-"…

幽灵按钮-按钮特效

效果是：图标鼠标以上旋转并缩放，按钮鼠标移上有线条飞入且箭头移动有提示框鼠标移开线条飞出效果图如下： 代码如下： <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8">…

鼠标单击后button1到button2的后面

代码： <div><input type"button" id"button1" value"button1" onclick"changePos(this);"><input type"button" id"button2" value"button2" > </div> <script…

读《精通JavaScript+jQuery》笔记三

//对于IE浏览器下处理textarea直接用maxlength无效果的方法function less(obj){return obj.value.length < obj.getAttribute("maxlength");}//动态添加表格，在第一行之后添加一行数据。var otdocument.getElementById("member").insertRow…

z-index失效问题解析

问题源自于我在原网页中加入了一个下拉菜单，在原先单独的下拉菜单代码里z-index并没有问题换到了复杂的网页里z-index显示混乱，由此我进行了相关的了解我们先看一段代码，可以复制下来自己看一下先给出结果图： <!DOCTYPE ht…

读《JavaScript DOM编程艺术》笔记一

边读JavaScript DOM编程艺术边记录了一些知识点，书确实挺不错的，很多东西讲得很清楚发现我写的有很多英文不知道为什么没有了，建议选择内容来看，能看到消失的单词第一种方式是将JavaScript代码放到文档head标签中的script标签之…

web前端-仿优车诚品首页二级分类菜单

效果图： 实现代码： 给出的HTML代码为整个块的代码，从left-bottom开始是二级分类菜单部分，用号进行了划分 <div id"middle-one"><div class"one-left"><div class"left-top"><…

图片轮播（上一幅下一幅+圆点+自动切换）

效果图如下： 代码如下： <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>*{margin:0;padding:0;}#imgList{width:730px;height:420px;margin:100px …

JavaScript四种继承方式

原型继承 function Person(name,age){this.namename;this.ageage; } Person.prototype.sayfunction(){alert(this.name" is garbage!"); }; function Man(){} Man.prototypenew Person(霍顿,22);//这句是重点，敲黑板 var man1new Man(); man1.say(); var…

市场急需的前端工程师基本技能

逛帖子看到的，记录一下： html标签的使用（何时该用何种标签） DNS解析、使用CDN和关于multiple Hostnames as part of resources request; HTTP Headers (Expires, Cache-Control, If-Modified-Since); 如何解决PageSpeed, YSlo…

JavaScript-瀑布流布局

效果图： 起初我们加载了25张图片，拖动滚动条的时候根据判断会读取后台提供的数据显示加载更多的图片实现代码： <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title>ja…

前端面试题汇总3

21、js的基础对象有哪些？window和document的常用方法和属性列出来。基础对象：Number、String、Boolean window： 方法：setInterval、setTimeout、clearInterval、clearTimeout、alert、confirm、open 属性：name、p…

前端面试题汇总1

1、判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母数字、下划线，总长度为5-20 var str"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa2afxsld_sldkjie232"; var reg/^[a-zA-Z][a-zA-Z0-9_]{4,19}$/; alert(reg.test(str));…

子元素的margin-top值会使父元素也出现margin-top值问题

子元素的margin-top会使父元素也出现margin-top值解决：（1）父元素添加overflow:hidden; （2）父元素用padding-top代替子元素的margin-top值

web移动端开发个人记录

记一些自己尝试移动端web开发的常用点 1、meta标签，常用的设置 <meta name"viewport" content"widthdevice-width,initial-scale1,user-scalableno"> user-scalable具体看让不让用户缩放 2、不同移动设备尺寸的字号设置 320宽度尺寸的…

三级菜单：有滚动跳转和选择展示相应内容

效果图如下：（此菜单可以应用于电商种类选择页面，此处是仿优车诚品官网首页） 代码如下，可直接复制粘贴查看效果 <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"…

web前端-导航条

HTML代码： <div id"nav"><ul><li class"change"><a href"#">首页</a></li><li><a href"#">我要买车</a></li><li><a href"#">我要卖车…

从psd到HTML个人记录

从psd到HTML： 1、准备工作：对psd进行审视，看头尾，找公共部分 2、样式：重置样式、公共样式、独立样式 3、尽量不要用id，用class就好 4、命名的方式要让自己清楚不要用拼音，注意规范 5、如果…

仿百度登陆效果-layer弹窗插件

layer.layui.com layer弹窗插件，可以使用各种弹窗效果 <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>*{margin:0;padding:0;}#top{width…

web前端-二级分类菜单（类似购物网站）

效果：鼠标移上去右边显示二级菜单。效果图： 实现代码 <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>*{margin:0;padding:0;}#nav{width:100%;h…

容器的高度height使用百分比时，如何设置可以使里面的文字垂直居中。

当我们给容器高度设置为百分比时，想让其中的文字垂直居中如果设置line-height:100%;效果如下：并没有什么作用代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title&…

supermap、cesium如何操作entity，添加删除修改等

不错的entity操作学习总结，正好解决了我的问题，放上链接以作记录 http://www.360doc.com/content/16/0816/15/14600786_583636244.shtml

正则表达式图形化工具

https://regexper.com/ 输入正则表达式可以看到相对应的图形化表示，便于理解和学习正则表达式

背景乱码动态效果

效果图如下： 代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>背景乱码动态效果</title> </head> <body> <canvas id"animateCode">&l…

点击图片，图片src重新加载（用于图片验证码）

效果图： 后台给的链接直接插入html中img的src里，点击图片重新加载这个src因为src的内容一直不变，比如都是 src"http://www.xxx.com/xxx/get?tockenIdQWERTYUISDFGHJEW" 如果刷新页面这个链接返回的图片会改变，为了做…

2018.03.06面试有感

从春节过后，目前总共面试了四家吧，郑州相比于合肥、杭州、上海...找工作的机遇不值一提，由于自身的一些客观原因，放弃了北上广苏杭..的一些优越的条件，选择了郑州。其实，也没什么后悔可言，事物都…

前端书籍推荐之《精通JavaScript+jQuery》

我在读这本书之前已经自学前端有近一年的时间了。从大三下学期开始进入找实习的混乱期，不知道自己要走什么方向，懵懵懂懂跌跌撞撞。Java-》测试-》后端-》前端，大致经历了这样一个特别混乱的时期。给后来人的建议是：早点定方向吧&…

JavaScript右下角广告

效果图： 代码： <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>.con{width:80%;margin:0 auto;height:2000px;border:10px dashed lightblue;}.con…

JavaScript弹出层效果

效果图：（简单实现功能） 代码： <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title>弹出层效果</title><style>a{display:block;height:30px;bac…

web前端知识汇总61-80

61、ajax请求的时候get和post方式的区别？ ajax是异步的JavaScript和XML，用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。这意味着在不重新加载整个网页的情况下可以对网页的某部分…

元素的padding值使元素整体扩大

问题：元素的padding值设定会使元素的整体扩大解决：给元素添加box-sizing:border-box;

web前端知识汇总21-40

21、事件委托是什么？ 利用事件冒泡的原理，自己触发的事件让他的父元素代替执行。 22、渐进增强和优雅降级之间有什么不同渐进增强：一开始只构建站点的最少特性，然后不断的对不同的浏览器追加不同的功能优雅降级：…

Web前端——CSS复习(3.27-3.31)

1、渐变 （1）什么是渐变？ “渐变”指的是两种或多种颜色之间的平滑过渡。 aa——渐变可指定多个中间颜色值（色标）； bb——渐变可以用在任何适用背景图片的地方：线性渐变、径向渐变、重复渐变…

web前端之若依开发经验

MENU 前言创建路由的细节前言 1、官网地址 2、在线文档 3、演示地址 4、代码下载 5、野生版的若依开发文档创建路由的细节 1、从系统管理进入菜单管理页面创建菜单，菜单创建成功后刷新页面，然而刚刚创建的菜单并不会出现。 2、解决创建完菜单不显示问题…

元素设为inline-block元素里有内容与无内容导致的错位问题

描述：一个div里放置三个span元素，三个span设置为display:inline-block;使其能在同一行显示并可以设置高度宽度问题：span里有无内容会导致该span元素的位置错位图： 代码： <!DOCTYPE html> <html> <…

WEB前端 -- 单选按钮、下拉、隐藏、表单

1.单选按钮：radio 1）name是命名，value的值是提交到服务器时给后台程序看的男：<input type"radio" name"sex"/>女：<input type"radio" name"sex" checked"che…

项目开发中的样式布局实例

1. 盒子margin-left和margin-top的设置，使得背景是灰色，而灰色部分真是大盒子的背景颜色要实现的样式： 应该用padding，这样颜色就和盒子颜色一样。 2. 红心是个图片，通过line-height height让红心和文在垂直居中的时…

浏览器渲染原理和性能优化

1. 渲染原理： (1)处理HTML生成DOM树 (2)处理CSS生成CSSDOM树 (3 )将两树合并成render树 (4 )对render树进行布局计算 (5)将render树中的每一个节点绘制到屏幕上细化分析: 1.浏览器把获取到的html代码解析成1个Dom树，html中的每个标签都是Dom树中的…

canvas图像放大镜效果

效果图如下：鼠标按下并移动放大镜出现，释放或移出图片外放大镜消失代码如下： <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>#canvas…

【Web前端开发基础】CSS的定位和装饰

CSS的定位和装饰目录 CSS的定位和装饰一、学习目标二、文章内容2.1 定位2.1.1 定位的基本介绍2.1.2 定位的基本使用2.1.3 静态定位2.1.4 相对定位2.1.5 绝对定位2.1.6 子绝父相2.1.7 固定定位2.1.8元素的层级关系 2.2 装饰2.2.1 垂直对齐方式2.2.2 光标类型2.2.3 边框圆角2.2.…

web前端之不一样的下拉菜单、不选中第一个元素的样式效果、伪类排除第一个元素、符号选择器、hover、not、first、child

MENU 效果图htmlcssJShtmlcss 效果图 htmlcssJS html <nav><ul><li class"navli"><h4>HTML5</h4><ul class"ulson"><li class"lison">HTML5</li></ul></li><li class"na…

px与em

px是相对于屏幕显示器分辨率而言的相对单位长度，一般固定布局可以用px em是相对父元素字体大小的相对单位长度，需要灵活一点的布局用这个浏览器默认字体16px，也就是1em16px 给body设置font-size为62.5%那么1em10px方便使用我司m端习惯用…

如何防止验证码接口被恶意攻击

关键词：短信轰炸机短信接口验证码是网站、App校验用户手机号码真实性的首要途径，在为网站及APP提供便利的同时，手机短信验证功能也会被部分用户和短信轰炸机进行恶意利用。如何才能防止被恶意点击呢？如果您是我们的客户&#xff…

jquery的输入框自动补全功能+ajax

内容参考网友文章写成，原博的链接找不到了，但是感谢分享！ 效果图： 涉及到ajax请求我这里本地请求不到数据就先放测试代码，在文章的最后会放上ajax代码： 用来测试的代码： <!DOCTYPE html>…

图文详解前端CSS中的Grid布局，你真的可以5分钟掌握

前言网站的布局是一个网站设计的根本，CSS的Grid布局已经成为了未来网站布局的基本方式。今天这篇文章我们通过图文，一起看看如何自己实现Grid布局方式。 CSS 第一个Grid布局首先我们看看最基本的Grid布局是什么样的，HTML页面的代码如下…

vue.js学习（一）

vue.js学习： 1、vue.js是什么？ 我们学习一项新技术首先就要搞清楚它是干嘛的。vue.js的作者是这样介绍他的：Vue.js是一套构建用户界面的渐进式框架。vue的核心库只关注视图层。vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的…

当window.parent.fun();子页面调用父页面方法不起作用时

当window.parent.fun();子页面调用父页面方法不起作用时请果断试一下top.window.parent.fun(); 有时间想仔细整理一下父子页面的传值和调用function的方法_(:зゝ∠)_

WEB前端 -- CSS伪类、伪元素选择器

一、伪类选择器伪类通过冒号(:)进行定义，它定义了元素的状态，如点击按下、点击完等。以前都是直接操作元素的样式，现在可为元素的状态改样式，看上去更“动态”。伪类一般反映无法在CSS中轻松或可靠检测到的某个元素的状态或属…

正则表达式封装

对一些简单的输入进行正则判断的整理，待优化 <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title>正则表达式封装</title> </head> <body> <script>//邮箱var emailRe…

web前端乱码问题

解决乱码问题： （1）encodeURLCompoenent()：将中文，符号等进行编码 （2）decodeURLComponent()：将编码后的值进行解码注意：这两个方法直接调用，不是某个对象的方…

成长

大一-接触网页制作，对html这四个英文字母有了些许的印象，组成单词的四个英文字母皆认识，但组成的单词，虽简单，却不识；大三-开始学习web前端，梦的开始。web前端课程是了解前端的初始，…

web前端知识汇总1-20

1、js的数据类型有哪些？如果分两种的话是哪两种？ number、string、boolean、null、undefined、object 基本数据类型（也叫简单数据类型，前五种）和复杂数据类型（object） 2、cookies的优缺点优…

图片透明切换

效果就是图片切换时的效果是透明度变换的效果图： 代码如下： <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>*{margin:0;padding:0;}#all{width:…

IE下兼容CSS3属性（或IE兼容box-shadow）方法

本文主要讲述IE下兼容CSS3属性的方法，问题来源于我想要在IE下用box-shadow这个属性做阴影，所以会主要围绕box-shadow来讲。第一种：如果我们想要在IE下兼容CSS3的属性可以使用ie.css3-htc，不过按照网上给出的解释是只能兼容部分的…

web前端面试题详解（1）

目录(?)[]position的值， relative和absolute分别是相对于谁进行定位的？absolute :生成绝对定位的元素， 相对于最近一级的定位不是 static 的父元素来进行定位。fixed （老IE不支持）生成绝对定位的元素，通常…

background图片背景在IE下显示失败

写了几个background:url(../img/sales.png)0px -160px no-repeat;然后在IE下愣是不出效果。。我就各种试。。然后发现是括号()和后面的0px之间没有空格 _(:зゝ∠)_对，就因为这个。以后一定记得写空格，论一个空格可能引发的血案。

雅虎WEB前端网站优化

雅虎给出了优化网站加载速度的34条法则（包括Yslow规则22条） 详细说明，下载转发 ponytail 的译文（来自帕兰映像）。 1.Minimize HTTP Requests 减少HTTP请求图片、css、script、flash等等这些都会增加http请求数&#x…

小白谈谈对JS原型链的理解

原文地址：http://www.jb51.net/article/83424.htm感谢分享，很形象的解释这篇文章主要介绍了小白谈谈对JS原型链的理解的相关资料,需要的朋友可以参考下原型链理解起来有点绕了，网上资料也是很多，每次晚上睡不着的时候总喜欢在网上…

记一个比较有意思的bug，position绝对定位问题

刚刚结束的项目里有一个很有意思的bug，我们常用如图这样的方式进行侧边栏的收缩隐藏和展示，右边的小按钮会是一个absolute的绝对定位，right定为负值代码如下： <!DOCTYPE html> <html lang"en"> <head&g…

IE兼容rotate旋转效果

要在IE下实现rotate旋转效果要用到滤镜，最简单的方法可以在 http://www.useragentman.com/IETransformsTranslator/ 上面这个地址的网站可以根据你的输入生成相应的代码： 比如我在框里输入：rotate(330deg) 点击Translate to IE Matrix按钮…

css sprite与background-size结合实现背景图片等比缩放

实际开发中，因为要兼容不同分辨率设备我们的sprite图片可能需要不同的尺寸，比如下面图片我们要用“活动车辆”这个标签，分别需要原图大小和缩小一半之后的图片如果是单独的图片很好处理，但我们这是一个css sprite处理起来就麻烦一…

web前端知识汇总81-100

81、HTML5新增哪些表单元素？ date、month、week、time、number、range、email、datalist、datetime、output、color、URL等 82、HTML5废弃了哪些HTML4标签？ font、frameset、noframe、frame、center、big、basefront、applet等 83、HTML5应用程序缓存…

根据IP查询所在城市接口（查询用户所在城市）

最近项目有用到定位用户客户端打开页面时所在的城市的需求，找到如下接口，做个记录文章为转载设计蜂巢IP地址查询接口：http://www.hujuntao.com/api/ip/ip.php腾讯IP地址查询接口：http://fw.qq.com/ipaddress新浪IP地址查询接口…

前端学习之书籍整理（flag还是要立的）

走过最远的路就是前端的套路，深入其中才发现要学的东西真！多！啊！_(:зゝ∠)_ 立个flag算是激励自己，前端的东西学着学着就发现实践是很重要但它本身的原理性的东西更重要。慢慢来吧少女_(:зゝ∠)_ 一、《Head first…

web前端-js变量、作用域

JavaScript里的基本类型有：null、undefined、number、string、Boolean，他们的值保存在栈空间里引用类型：object、数组、函数如果是引用类型的值，则必须在堆内存中为这个值分配空间。由于这种值的大小不固定所以不能放到栈内存…

【Web前端开发基础】CSS的结构伪类选择器、伪元素、浮动

CSS的浮动目录 CSS的浮动一、学习目标二、文章内容2.1 结构伪类选择器2.2 伪元素2.3 标准流2.4 浮动2.5 清除浮动2.6 拓展（BFC） 三、综合案例3.1 小米模块案例3.2 网页导航案例一、学习目标能够使用结构伪类选择器在HTML中选元素能够说出标准流元素的…

WEB前端 -- 块元素与内联元素

1.块级元素 1)块元素一般独自占据一行，可以设定元素的宽和高。 2)块级元素一般是其他元素的容器，可以容纳块级元素和行内元素. 3)可设置4个方向的padding和margin值。 4)常见的块级元素有div，p，h1~h6等。 2.行内元素 1)不可…

HTML入门小实例

页面布局的三种方式： a、TABLE布局：已过时 b、DIV CSS：当前主流 c、HTML5布局标签：未来趋势 1、学生成绩表设计注意： <body> <table height"250px" width"600" border"1"…

微信小程序之组件学习2

二：基础内容包括 icon 图标 text 文本 progress 进度条 icon：属性只有三个 type 类型，有效值：success，success_no_circle，info，warn，waiting，cancel，d…

HTML5——监听手机的一些事件：手机加速度devicemotion、设备方向变化deviceorientation、手机摇一摇、指南针

1. devicemotion：监听手机加速度变化的事件（比如：手机疯狂摇摆） 属性：均为只读属性 （1）accelerationIncludingGravity：重力加速度（包括重心引力9.8） &…

HTML5——Geolocation对象的getCurrentPosition()、watchPosition(）、clearWatch()方法

1.window.navigator.geolocation获取Geolocation对象 2. getCurrentPosition()方法：获取当前位置信息纬度：latitude 经度：longitude 海拔：altitude 定位精准度（单位：米）：accura…

HTML5——drag拖拽

1. 给标签元素添加属性：draggable “true”，该元素即可被拖拽，任何元素都可以被拖拽特点：拖走的是灵魂 2. 事件 （1）可拖拽元素的事件 dragstart事件：被拖拽元素，开始被拖拽时触…

HTML5——读取文件FileReader对象上传文件

1. 方法： （1）abort()方法：终止读取 （2）readAsText(file，[encoding])方法：将文件读取为文本 （3）readAsBinaryString(file)方法：将文件读取为二进…

WEB前端 -- Javascript中的this

一this是什么--基于调用位置的上下文调用位置不同this值不同二为什么使用this 三 this的四大绑定规则默认绑定--函数调用类型独立函数调用this指向全局对象隐式绑定--调用位置是否有上下文对象或者说被某个对象拥有或者包含显示绑定 new绑定四优先级五绑定this注意点…

canvas实现放大镜效果

效果： <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>#copycanvas {border: 1px solid #000;display: none;}#square {width: 90px;height: 90px;background-…

JS阻止冒泡事件和默认事件（IE和其他浏览器兼容）

冒泡事件：比如我们点击了一个元素然后从它本身开始一层一层向上的父元素都做出反应直到根元素默认事件：像a标签的点击跳转和页面鼠标右键单击弹出菜单等都是默认事件我们有时想要阻止这些事件需要注意的是IE浏览器和其他浏览器的兼容问题代码如下&…

2018web前端面试题收录集

转载地址：http://blog.csdn.net/wdlhao/article/details/79079660本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题，并且都给出了我在网上收集的答案。马上就要过春节了，开年就是崭新的一年，相信很多…

web前端安全

大体了解了下web前端安全的几项黑客技术，以下做简单整理，具体的深入学习希望有时间好好读一下《web前端黑客技术揭秘》这本书，给走在web前端学习路上的自己加油！！ 前端安全主要有三类：XSS、CSRF、界面操作劫…

JS简单实现图片上一张下一张操作

简单实现了js的图片上一张下一张效果，没怎么做css美化单纯就是想记录一下js部分。效果图：嘿嘿，wuli爽妹子镇图！！ <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8&…

图片压缩方法

在前端中，我们切图之后图片要求在一定大小之内比如200k，那么需要我们对图片进行处理。我选择的处理方法有两种： 第一种：图片本身尺寸不大适当缩放不影响效果对于这种图片我们可以把图片的尺寸缩小方法：PS-》图像…

W3C-jQuery整理

又重新把W3C里关于jQuery的部分学习了一下，之前有很多东西模棱两可，这下又巩固了。所以说，基础真的很重要啊。基础实践 W3C整理jQuery相关 $(document).ready(function(){ });$.ready(function(){ });$(function(){ }); 他的作用类似于传…

读《精通JavaScript+jQuery》笔记一

// 数值转字符串var num124;numnum"";alert(typeof(num));//结果是stringvar num2123;num2num2.toString();alert(typeof(num2));//结果是string // 字符串转数值var s"liona";s parseInt(s);alert(s);//返回NaN，因为会先判断0位置的字符…

媒体查询

定义和使用使用 media 查询，你可以针对不同的媒体类型定义不同的样式。 media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏…

ECMAscript到底是什么？它和JavaScript的关系？

要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262&#xff09…

响应式布局或自适应网页设计

看了一篇不错的自适应网页设计介绍就自己试着做了一下，原文写的确实很好，收获很多。下面放上链接和自己的例子： 链接：http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 对原文知识点的整理： 一、…

Css 基础知识（一）

1、Css概念 CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)，Css是用来美化html标签的，相当于页面化妆。 ◆样式表书写位置 2、选择器 2.1、写法选择器是选择谁（标签）的过程选择器{属性:值； 属性:值;} …

HTML5——history实现单页面

1. 单页Web应用（single page web application，SPA） history.back()：URL回退一次 history.forward()：URL前进一次 history.go(n)：URL几次history.back()或几次history.forward()，比如&#xf…

HTML5客户端存储Web Storage

1. Web Storage 支持情况：IE8以上的主流浏览器都支持Web Storage，IOS平台和Android平台对Web Storage都有很好的支持。 localStorage：存储在本地磁盘，永久存储。sessionStorage：临时存储，数据保存在浏览器…

HTML5——worker

1. js是单线程，可以通过worker创建一个异步的js线程，将计算好的结果返回给js主线程。 2. 要满足同源策略，在服务器中打开测试 3. 基本操作 worker.js文件： 结果： 4. 断开worker （1）worker.te…

background属性总结

对background的属性做了一个总结，以后会慢慢补充，暂时是写了个html来展示总结内容，可以直接把代码复制打开看效果图： 代码： <!DOCTYPE html> <html> <head lang"en"><meta charset&q…

解决IE不支持display:inline-block;

对于IE不支持display:inline-block;的解决方法 .triangle-left{height:0px;width:0px;border:30px solid #000;border-color:transparent #ebebeb transparent transparent;display:inline-block;*display:inline;zoom:1;_height:250px;margin-left:-20px;position:relative;to…

微信小程序之组件学习

微信小程序框架提供的基础组件有八类一：视图容器 view container 包括： view 视图容器 scroll-view 可滚动视图容器 swiper 滑块视图容器 view：感觉跟html里的div对应，官方文档里给出的例子是： <view clas…

js实现网页全屏切换（平滑过渡），鼠标滚动切换

实现效果为页面平滑过渡全屏切换，点击导航和鼠标滚动都可以切换。效果图： 代码： <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><meta http-eq…

前端-搜索引擎优化-《谷歌搜索引擎优化初学者指南》总结

1、通过标题标签标明页面的标题标题标签告诉用户和搜索引擎一个特定的网页主题是什么 title标签理想情况下应该为每一个网页创建唯一的页面标题网站首页的标题可以列出网站或者公司名称和其他一些重要的信息，诸如公司的实际地址，一些主要关注的领驭…

关于web app rem 的使用

转自：http://www.qdfuns.com/notes/39070/1cee3f0a2f3939d0ed28a44f874ec9cc.html，感谢分享！ 1.拿到设计稿后怎么做？ 拿到设计稿后首先确认设计稿的宽度，是320px、375px、640px还是其它宽度。这里我们假设设计稿为32…

CSS实现自适应高度布局：头部底部固定，中间自适应铺满屏幕剩余高度，中间盒子里左盒子固定右盒子自适应宽度

如题：顶部底部固定高度，中间部分铺满屏幕剩余高度，中间盒子里又左盒子固定宽度，右盒子自适应宽度且距左盒子总是20px 主要解决方法是中间盒子的top:40px;bottom:40px;设置。原理是在position是absolute时同时设置top和bottom或者…

Web前端——Javascript学习（API）

1、API：应用程序编程接口这是实现的，现成的对象和方法。——提高开发效率 2、数组API （1）arr to String var strarr.toString() var strarr.join("连接符")——自定义连接符固定套路——1.将字符拼接为单词&…

Web前端复习——Javascript复习（2）

1、变量数据类型 （1）变量定义what——内存中存储1个数据的存储空间，再起一个名字何时用when——程序中的数据都要先用变量保存，再处理如何使用how——声明赋值取值声明：在内存中创建一个新变量 how——var …

TWaver家族新成员 — Legolas工业自动化设计平台

对于TWaver可视化家族的成员，大家比较熟悉的是我们的网络拓扑图组件和MONO Design三维建模工具。作为开发工具，这两款产品面向广大的程序猿同志，在界面可视化上为大家省时省力。但是，当项目交付以后，我们经常会遇到这种…

JavaScript中substr和substring的区别

substring和substr都是截图字符串的方法，两者的区别是： substring(开始的位置，结束的位置)，所截取的字符长度为：结束位置-开始位置 substr(开始的位置，截取的长度)，所截取的字符长度为&#x…

flex布局实现色子

1、色子数：1 思路：让圆点（即子元素）在横轴上居中在竖轴上居中，分别用justify-content和align-items 实现代码： <!DOCTYPE html> <html> <head lang"en"><meta charset&quo…

Flex布局教程

十一回来主要精力放在了微信小程序的学习上，有几天木有更博客了，今天静下心来看一些东西，好文章就是要分享转载于阮一峰的博客原链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html，包括他的下一篇实例…

css3——transform：rotate（旋转）、scale（缩放）、skew（拉伸）、translate（平移）、transform-origin

注意：transform是复合属性，拆开写会替代，先平移再旋转和先旋转再平移的结果是不同的 1. CSS3 转换：transform属性可以对元素进行移动、缩放、转动、拉长或拉伸注意： Internet Explorer 9 要求前缀 -ms- 版本&#x…

JavaScript中的this（什么是调用栈和调用位置）

此处截取《你不知道的JavaScript》中对this的描述片段，通过对调用栈和调用位置的描述找到this指向 this是在运行时进行绑定的而不是编写时绑定。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。 function baz(){console.log("ba…

读《CSS那些事儿》笔记一

学习css最好的方法就是不断地做，不断地想，不断地实践 Css的特点： 1、修饰页面文本、图片等页面元素，避免使用不必要的HTML元素 2、更有效地控制页面结构、页面布局 3、提高开发和维护的效率 Css的简写： 1、颜色的…

js写快速排序

笔试遇到的题目，记录一下： js写快速排序快速排序的思想： （1）在数据集合中选择一个元素作为基准（pivot） （2）所有小于基准的元素都移到基准的左边，所有大于…

三列布局中间列宽度自适应

需求：三列布局，左右两列宽度固定，中间列宽度自适应解决：这个问题是采用绝对布局解决的，左右两列绝对布局中间普通设置样式就OK 效果图： 代码如下： <!DOCTYPE html> <html> <h…

HTML5头部为什么只需要写!DOCTYPE HTML？

面试遇到的，记录一下，虽然我个人有点疑惑，这种题目存在的意义。。毕竟实际开发知不知道没啥影响啊 HTML5为什么只需要写<!DOCTYPE HTML>? html5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为&am…

input标签输入框点击时出现默认边框

要去掉input标签输入框点击时出现的默认边框，即如下图解决：input{outline:none;}

bootstrap实现弹出提示为图片

效果图如下：鼠标移至弹出二维码首先title下面引入 <link rel"stylesheet" href"bootstrap-3.3.5-dist/css/bootstrap.min.css"> <script type"text/javascript" src"jquery-1.10.2.min.js"></script> &…

web前端-boostrap图片轮播

<!doctype html> <html lang"zh-cn"> <head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>轮播</title><link href"bootst…

web前端-CSS3基础

1、创建圆角边框、向矩形添加阴影、使用图形绘制边框 Border-radius Border-shadow Border-image  <div id"radius">CSS3-圆角</div>  <div id"shadow">边框阴影</div> <div id&quo…

web前端知识补充记录

1、判断字符串是否是这样组成的，第一个必须是字母，后面可以使字母、数字、下划线，总长度为5-20. /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/ 2、截取字符串abcdefg的efg var str"abcdefg"; var sstr.substr(str.length-3,str.length); aler…

a便签hover设置颜色失效问题解决

在页面比较复杂的时候往往会有很多的标签元素，在CSS设置的时候就容易设置失效，这次我遇到的问题就是a标签的hover里设置了颜色但始终失效，最终的解决方法就是在CSS里增加它的选择器的权重值。我们知道权重越高就会覆盖其他的设置&#xff0…

JavaScript组成

JavaScript是一种专为与网页交互而设计的脚本语言，由三个不同的部分组成： 1、ECMAScript，由ECMA-262定义，提供核心语言功能； 2、文档对象模型DOM，提供访问和操作网页内容的方法和接口； 3、浏…

tab页切换

效果图： 网上找了个图片按着模样实现的，tab按钮背景图片自己画的不大好看_(:зゝ∠)_ 代码： <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><st…

IE下js兼容之getElementsByClassName和e.target

总有一种想毁掉所有用IE的人的冲动啊_(:зゝ∠)_ 1、IE不支持getElementsByClassName，所以解决方法如下： function getClassNames(classStr,tagName){if(document.getElementsByClassName){return document.getElementsByClassName(classStr);}else{var…

js无缝轮播

其中对上一页下一页按钮设置visibility属性是为了解决轮播中点击上一页下一页导致的bug，应为是a标签所以用了visibility属性，如果是按钮button可以直接设置在轮播过程中按钮不可点击，当然其他解决方法都可以，以实际为准代码如下…

常用的前端工具

每次换电脑重新配置我习惯的开发环境真的real心累，这里做一个记录，会不定时添加！ 1、color cop-》这是一个吸取颜色的工具，这是我在PS之余最常用的一个取色软件，小巧实用！ 网上一搜就可以找到&#xff0c…

jdk+eclipse+tomcat+maven安装配置

1、JDK 下载：http://www.wmzhe.com/soft-30117.html 安装图解：https://jingyan.baidu.com/article/f3ad7d0ffe511409c3345b19.html 2、tomcat 安装图解：http://blog.csdn.net/shangguanyunlan/article/details/49869407 3、eclipse 安装…

css画项目里常用的多边形（三角形、梯形）

暂时放这些，以后遇到别的继续收录效果图如下： 代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>css形状</title><style>.lsosceles_triangle{co…

解决ie兼容颜色rgba格式

background-color:rgba(0,0,0,0.5); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr#7F000000,endColorstr#7F000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr#7F000000,endColorstr#7F000000);以上代码，我们想…

JavaScript实现tab标签-解决循环bug问题

用JavaScript实现tab标签当我们用循环实现每个tab标签点击效果的时候会发现循环bug，每个i输出都是循环的最终结果而不是每一个循环中的数值解决方法有两个第一种方法是给DOM节点添加_index属性，属性值等于索引i 简单代码如下： <!DOCT…

JS原生实现图片轮播切换效果

首先来分析一下轮播图效果的实现原理： 1、父元素作为显示窗口，大小固定超出部分隐藏，即设置overflow:hidden; 2、子元素存放图片列表用ul，ul固定定位，参照为父元素，即父元素position:relative;ul元素posi…

期末前端web大作业——我的家乡陕西介绍网页制作源码HTML+CSS+JavaScript

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有…

JavaScript实现十六进制颜色混合功能、色差之权重值、replace、parseInt、slice、round、toString

目录代码replaceparseIntsliceroundtoString 代码 /*** 两种颜色混合后的值* param {string} color1 颜色1* param {string} color2 颜色2* param {number} weight 权重* return {string} blendedColor 最终结果*/ function blendColors(color1, color2, weight) {// 解析颜色…

Bun - NodeJS的替代

什么是Bun Bun 是采用 Zig 语言编写的高性能 “全家桶” JavaScript 运行时。Bun 提供了打包、转译、安装和运行 JavaScript & TypeScript 项目的功能，内置原生打包器 (native bundler)、转译器、task runner、npm 客户端，以及 fetch、WebSocket等 …

vue3+element-plus之el-date-picker日期选择器清空无回调的解决方案

MENU 前言解决htmlJavaScrip 前言在一个任务列表的搜索栏，添加一个日期区间搜索。使用到element-plus中的日期选择器el-date-picker；el-date-picker本身方法中有change事件，但是清空按钮没有对应回调方法。在任务列表的搜索需求中&#xff0…

Web 开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十七】(转)

原文地址： http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-27.html 《Web 前端开发精华文章推荐》2014年第6期（总第27期）和大家见面了。梦想天空博客关注前端开发技术，分享各类能够提…

$html中的换行(\n)或回车(\r)符号不起作用的解决办法、br、white、space、pre、line$