前端
关注
分享
扫一扫
文章平均质量分 95
lvyang251314
生活不只有眼前的苟且，还有诗和远方。
展开
-
网页怎么调用qq聊天
想在网站中需要加入联系QQ的功能，我下面就来说下在web页面中调用QQ聊天是如何实现的，直接上代码：其中腾讯将代码分为：移动端 mqqwpa://im/chat?chat_type=wpa&uin=输入QQ号&version=1&src_type=web&web_src=oicqzone.comPC端 tencent://message/?uin=输入QQ号&a...转载 2018-03-07 16:47:38 · 3066 阅读 · 0 评论 -
自己写的一个jq实现的tab栏自动切换，不喜勿喷
效果图：话不多说上代码：<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0&q原创 2018-10-15 11:39:45 · 753 阅读 · 0 评论 -
js高级整理
通常，通过 JavaScript，您需要操作 HTML 元素。 1、通过 id 找到 HTML 元素 2、通过标签名找到 HTML 元素 3、通过类名找到 HTML 元素提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。var x=document.getElementById("intro");var y=document.getElements...转载 2018-10-08 16:56:05 · 489 阅读 · 0 评论 -
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度
一、先来大致了解下基本的信息上图时一张我从别人的博客中找到的，比较系统形象的展示了一些基本的信息。 二、显示器的屏幕信息screeen.height:屏幕分辨率的高screen.width:屏幕分辨率的宽前面这两个数表示：屏幕宽高(屏幕像素) ---- 定值screen.availHeight:屏幕可用高度（屏幕分辨率的高度-上下测任务栏的高度）screen.a...转载 2018-10-12 14:40:12 · 10745 阅读 · 1 评论 -
(淘宝无限适配)手机端rem布局详解
从网易与淘宝的font-size思考前端设计稿与工作流本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。这是淘宝的github网址，里面有适配所需的js还有说明文档 地址：https://github.com/amfe/lib-fle...转载 2018-09-21 11:22:20 · 21160 阅读 · 2 评论 -
html中的锚点
一、页面内跳转的锚点设置 页面内的跳转需要两步： 方法一： ①：设置一个锚点链接<a href="#miao">去找喵星人</a>；（注意：href属性的属性值最前面要加#） ②：在页面中需要的位置设置锚点<a name="miao"></a>；（注意：a标签中要写一个name属...转载 2018-09-21 09:52:13 · 669 阅读 · 0 评论 -
PC端自适应布局
截止目前，国内绝大多数内容为主的网站（知乎，果壳，V2EX，网易新闻等）均使用内容区定宽布局，大多数电商网站（网易考拉，京东，聚美优品）也使用了内容区定宽的布局，也有些网站使用了自适应布局：该篇文章为转载，更多文章见我的个人博客：http://cherryblog.site/天猫 内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。 注意热门市...转载 2018-09-11 11:02:04 · 15178 阅读 · 0 评论 -
HTML，JS禁止鼠标右键、禁止全选、复制、粘贴的方法
禁止鼠标右键、禁止全选、复制、粘贴；oncontextmenu事件禁用右键菜单； js代码：document.oncontextmenu = function(){ event.returnValue = false;}// 或者直接返回整个事件document.oncontextmenu = function(){ return false;}onsele...转载 2018-09-11 10:10:40 · 257 阅读 · 0 评论 -
网页自适应pc端和移动端
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。 于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 下面让木易设计来告诉大家。 很多网站的解决方法，是为不同的设备提供不同的网页，比如专门...转载 2018-09-11 14:01:05 · 3803 阅读 · 0 评论 -
jQuery——动态给表格添加序号
很多时候遇到需要对表格动态操作，而且一般都会有表格的序号，但是有时候我们对表格的序号直接输出是比较麻烦的，所以尝试一下使用jquery动态输出吧~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d...转载 2018-10-23 10:50:08 · 4589 阅读 · 0 评论 -
使用json-server和postman模拟搭建服务端环境
很多都东西都要有第一次尝试才会有收获，例如前端可以创建json文件编写模拟接口，利用json-server去模拟搭建一个本地服务端环境去监听和操作自己创建的json数据，进而通过请求本地服务端接口进行数据的展示，也可以对数据进行增删改查。这对以后和后端开发工程师配合制定接口规范多多少少都有一点帮助吧。废话不多说，直接丢操作：1.首先你要安装最新版本的Node.js2.打开cmd1）(全...转载 2018-11-29 11:13:48 · 488 阅读 · 0 评论 -
百度地图api label背景宽度问题！已解决！
百度地图api label背景宽度问题！已解决！今天研究百度地图api的时候发现一个问题如下图，后来百度发现是因为和bootstrapt的样式冲突了，解决办法：把页面中地图的样式加上：#yourmap label{max-width:none;}，记录一下，以备再查！...原创 2019-01-15 13:46:15 · 1853 阅读 · 3 评论 -
纯css实现鼠标移动方向遮罩效果
在codepen上看到一款css效果，很不错 根据鼠标进入框的方向的不同，遮罩进入的方向也不同。自己思考如何判断鼠标进入的方向，没有事件可以直接获取进入元素的方向，虽然可以用鼠标坐标计算，但是太麻烦。直接用纯css就可以实现原理 首先定位4个不同方向的遮罩，然后给每个遮罩添加伪元素before 上图中黑框内不同颜色的地方就是每个遮罩的before，鼠标从某个方向进入时...转载 2018-12-12 11:04:49 · 610 阅读 · 0 评论 -
页面添加锚点的三种方式
页面添加锚点的三种方式 HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。 锚点链接对SEO的...转载 2018-12-20 14:36:10 · 1260 阅读 · 0 评论 -
$(function(){})和$(document).ready(function(){}) 的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）二是onload，指示页面包含图片等文件在内的所有元素都加载完成。 用jQ的人很多人都是这么开始写脚本的：$(function(){// do something});其实这个就是jq...转载 2018-12-04 09:41:48 · 975 阅读 · 0 评论 -
开发环境、测试环境、生产环境 到底是什么？
读一些官方文档的时候，总会遇到以下几个关键的名词，一开始我不太懂，绕来绕去，让我对文档阅读产生了误会，于是查找了一些资料。百度解释如下：开发环境：开发环境是程序猿们专门用于开发的服务器，配置可以比较随意， 为了开发调试方便，一般打开全部错误报告。测试环境：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产机上。生产环境：是指正式提供对外服务的，一...转载 2018-12-07 17:09:26 · 8910 阅读 · 0 评论 -
vue配置路由（router）
介绍路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件》》》安装本地环境安装路由插件vue-router： cnpm install vue-router --save-dev *没有安装淘宝镜像的可以将 cnpm 替换成 npm想要安装的可以看这篇文章http://www.cnblogs.com/padding1015/p/7162024.ht...原创 2018-11-30 15:17:46 · 661 阅读 · 0 评论 -
vue如何引用bootsrap
npm 安装的方式引入bootsrap1.npm install jquery --save-dev在bulid下面的webpack.dev.conf.js下增加以下配置plugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery"}),2.在main.js中加入如下代码：import $ ...原创 2018-11-30 14:03:23 · 1540 阅读 · 0 评论 -
自适应PC端网页制作使用REM
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080使用了几种办法1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2.长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了R...转载 2018-09-11 11:19:42 · 2863 阅读 · 3 评论 -
使用jquery操作元素的css样式（获取、修改等等）
//1、获取和设置样式$("#tow").attr("class")获取ID为tow的class属性$("#two").attr("class","divClass")设置Id为two的class属性。//2、追加样式$("#two").addClass("divClass2")为ID为two的对象追加样式divClass2//3、移除样式$("#two&qu转载 2018-06-14 14:17:35 · 4808 阅读 · 0 评论 -
整理了一些js,常用对象的实例
对象实例JavaScript String（字符串）对象 实例<!--返回字符串长度--><script type="text/javascript"> var arr= "dadadd"; document.write(arr.length);</script> 结果：<!--为字符添加样式--><script type=&quo原创 2018-03-21 11:20:41 · 647 阅读 · 0 评论 -
Dom操作大全
Dom常用操作 文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能。一、DOM树DOM树有两种，分别为节点树和元素树。节点树：把文档中所有的内容都看成树上的节点；元素树：仅把文档中的所有标签看成树上的节点。二、DOM常用操作2.1 查...转载 2018-03-21 10:41:35 · 1142 阅读 · 0 评论 -
js内置对象
Javascript对象总结 JS中内置了17个对象，常用的是Array对象、Date对象、正则表达式对象、string对象、Global对象 Array对象中常用方法： Concat（）：表示把几个数组合并成一个数组。 Join（）：返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔符分隔开来。 Pop（）：移除数组最后一个元素。 Shift（）：移除数组中第一个元素。 Sli...转载 2018-03-20 11:22:22 · 205 阅读 · 0 评论 -
获得浏览器可视区域宽度，高度
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度对于 Internet Explorer 8、7、6、5：document.documentEleme...原创 2018-03-16 17:18:41 · 6544 阅读 · 0 评论 -
js判断邮箱格式是否正确
<form action="#"onsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" va原创 2018-03-16 14:51:27 · 3529 阅读 · 0 评论 -
用js动态操纵DOM节点
js控制添加和删除DOM节点1.添加dom节点<div id="div1"> <p id="p_1">我是第一个段落</p> <p id="p_2">我是第二个段落</p></div>浏览器效果开始编写js代码<script> /原创 2018-03-16 14:16:51 · 1552 阅读 · 0 评论 -
jqueryeasy ui 的 accordion 和 tabs控件
系统菜单accordion：（静态定义方法）内容折叠显示，可以将复杂的信息分块显示 。不仅仅可以用于菜单 <divid="aa" class="easyui-accordion"style="width:700px;height:300px;"> <divtitle="系统管理菜单" iconCls="icon-ok&quo转载 2018-03-15 18:15:09 · 614 阅读 · 0 评论 -
小白前端，学习大全
第一阶段：HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。JS高级特征：正则表达式、排序算...转载 2018-02-28 14:02:42 · 257 阅读 · 0 评论 -
JavaScript的对象表示法JSON
JSON详解阅读目录JSON的两种结构认识JSON字符串在JS中如何使用JSON在.NET里如何使用JSON总结JSON的全称是”JavaScript Object Notation”，意思是JavaScript对象表示法，它是一种基于文本，独立于语言的轻量级数据交换格式。XML也是一种数据交换格式，为什么没有选择XML呢？因为XML虽然可以作为跨平台的数据交换格式，但是在JS(JavaScrip...转载 2018-03-21 11:44:36 · 613 阅读 · 0 评论 -
Flex弹性布局
Flex 布局教程：语法篇作者： 阮一峰日期： 2015年7月10日网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已...转载 2018-03-21 17:50:46 · 203 阅读 · 0 评论 -
web前端面试100题
1.一些开放性题目1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。2.项目介绍3.如何看待前端开发？4.平时是如何学习前端开发的？5.未来三到五年的规划是怎样的？position的值， relative和absolute分别是相对于谁进行定位的？§ absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。§ fixed...转载 2018-06-14 10:00:08 · 105932 阅读 · 10 评论 -
Html特殊字符编码
HTML特殊字符编码大全：往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字。下面就是以字母或数字表示的特殊符号大全。 ´&acute;©&copy;>&gt;µ&micro;®&reg;&&amp;°&deg;¡&iexcl; &nbsp;»&am转载 2018-05-08 09:29:35 · 3665 阅读 · 0 评论 -
js获取和设置自定义属性的方法
Js操作自定义属性的方法：12345var testEle = document.getElementByIdx_x("test") testEle.setAttribute("test","aaa"); // 设置 testEle.getAttribute("test")； //获取testEle.attributes["test"].nodeValue; // 获取Jquery操作自定义属性...转载 2018-05-07 17:14:44 · 627 阅读 · 0 评论 -
jq对手机号进行验证
如果要做手机号的验证，那么我们需要知道手机号码的号段。//移动号码归属地支持号段:134 135 136 137 138 139 147 150 151 152 157 158 159 178 182 183 184 187 188//联通号码归属地支持号段:130 131 132 145 155 156 176 186 //电信号码归属地支持号段:133 153 177 180 181 ...转载 2018-05-17 14:45:19 · 8011 阅读 · 0 评论 -
单行文本超过显示省略号（......）方法
摘要： 有时候我们在前端开发过程中,会遇到一些需求:用户要求首页的很多个模块内容描述文字太多的情况下只显示:“XXXXX...”在css中有很方便的标签可以使用,但前提是针对div块级元素,对span和a这些不起作用,但我们在实际应用中可以在标签外面再嵌套一个div,这样其实也不难<style>div{white-space:nowrap;//强制不换行,所有内容一行显示overflo...转载 2018-05-04 14:57:22 · 472 阅读 · 0 评论 -
多行文本超过显示（.....）的方法
现在的浏览器都支持text-overflow:ellipsis属性，用来实现单行文本的溢出显示省略号，但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢？-webkit-line-clampWebkit支持一个名为-webkit-line-clamp的属性，他其实是一个WebKit-Specific Unsupported Property，也就是说这个属性并不是标准的一部分...转载 2018-05-04 14:53:10 · 578 阅读 · 0 评论 -
js 的json转数组，数组转json
//数组转json串var arr = [1,2,3, { a : 1 } ];JSON.stringify( arr );//json字符串转数组var jsonStr = '[1,2,3,{"a":1}]';JSON.parse( jsonStr );转载 2018-05-17 10:56:13 · 23527 阅读 · 1 评论 -
JS正则表达式验证账号、手机号、电话和邮箱是否合法
验证帐号是否合法验证规则：字母、数字、下划线组成，字母开头，4-16位。1234567891011function checkUser(str){ var re = /^[a-zA-z]\w{3,15}$/; if(re.test(str)){ alert("正确"); }else{ alert("错误"); } }checkUser("jihua_cnblogs");...转载 2018-05-03 09:58:07 · 450 阅读 · 0 评论 -
自己根据百度地图api改写的地图源码 展示
1.效果图(补充：大小可以根据需求改最外面容器大小，宽度不是全屏平铺的时候要给固定宽度)2.源码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>中智河南百度地图</title> &原创 2019-01-15 13:50:23 · 1404 阅读 · 0 评论