网页前端设计

http://www.86y.org

搜索文章

js 只选择选择时分秒的jq插件2018/6/20 11:40:49

js 只选择选择时分秒的jq插件

一、概述:由于项目中需要使用到只选择时分秒的插件,而开始使用的laydate插件必须要带日期所以,还是自己写一个时分的插件吧。效果如图下:二、实例代码:(点击进入预览效果)<!doctype html><html><head><meta charset="utf-8"><title>js 只选择选择时分秒的jq插件-幸凡学习网</title><style>/* CSS Document */html, body, div, p, ul,ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td,figure{margin:0;pa...未完,继续阅读→

插件时间

阅读(13641)条

小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈2018/6/8 14:25:30

小程序之 保存canvas生成商品图片附加小程序二维码 分享到朋友圈

一、概述:看了很多小程序的canvas,很多人在骂街,跟浏览器的操作实在相差太多,API极少。所以有些功能基本上没办法实现。但是基本的还是可以的。比如我要实现 生成商品图片(包含产品的:标题,价格,图片,小程序商品详情的二维码等)点击生成后的canvas保存到手机。虽然效果实现了,但是走了不少弯路。所以有必要在此纪念一下。需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi520/wxapp-qrcode/blob/master/utils/qrcode.js以上二维码组件默认是有空白边的的,如果不需要空白区域,也可以修改...未完,继续阅读→

小程序canvas

阅读(12179)条

ES6 Promise 用法讲解 链式操作2018/4/26 10:29:50

ES6 Promise 用法讲解 链式操作

Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。那就new一个var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log("执行完成"); resolve("随便什么数据"); }, 2000);});Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“...未完,继续阅读→

es6proisejs

阅读(7975)条

canvas跨域绘制图片报错解决方案2018/4/4 16:37:42

canvas跨域绘制图片报错解决方案

概述:canvas绘制图片,由于浏览器的安全考虑,如果在使用canvas绘图的过程中,使用到了外域的图片资源,那么在toDataURL()时会抛出安全异常:Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.解决方案第一步:访问的服务器允许,资源跨域使用,也就是说设置了CORS跨域配置,Access-Control-Allow-Origin打开IIS,找到“HTTP响应标头”点进去,在右侧可以看到添加,然后添加如下标头即可Access-Control-Allow-Origin:* 第二...未完,继续阅读→

canvas跨域绘制

阅读(8547)条

js取json对象的键和值2018/4/3 15:36:36

js取json对象的键和值

在json数据不明的情况想要把键名和值都输出,确实是比较麻烦下面就介绍获取方法代码如下://构建一个json对象 var jb={"美的":49,"三星":35,"海信":25,"格力":16,"方太":14}; for(var key in jb){ alert(key); //json对象的key alert(jb[key]); //json对象的值 } 未完,继续阅读→

js键名json

阅读(10016)条

解决 百度分享之 模拟click()点击无效 方案2018/4/2 15:42:19

解决 百度分享之 模拟click()点击无效 方案

一、概述:今天因为客户有个功能需要一打开页面就要模拟点击百度的share分享插件,本来以为很简单。没想到直接click()是无效的。终于在一篇博客中找到了方法及原因。点击A标签本身,并不会触发跳转到指定链接的事件,就是说,我们平时都是点击的A标签中的文字了。所以要想用JS模拟点击A标签事件,就得先往A标签中的文字添加能被JS捕获的元素,然后再用JS模拟点击该元素即可。打印$("a")[0],得到的是http://www.86y.org ,但实际上$("a")[0]是一个object对象,或许说是DOM对象更贴切一些。二、解决方法:方案一:docu...未完,继续阅读→

js模拟点击

阅读(11773)条

主流浏览器内核的介绍2018/3/29 8:54:12

主流浏览器内核的介绍

一、浏览器市场份额本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。二、浏览器内核浏览器内核可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。2.1 渲染引擎渲染引擎负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。2.2 JS...未完,继续阅读→

移动端浏览器的四大浏览器内核2018/3/27 13:51:59

移动端浏览器的四大浏览器内核

手机浏览器种类:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,其他杂牌浏览器国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自助研发的内核,就像国内的手机操作系统都是基于Android修改的 全球仅有四大浏览器内核  目前全球仅有四个独立的浏览器内核,分别为微软IE的Trident、网景最初研发后卖给Mozilla基金会并演化成火狐的Gecko、KDE的开源内核Webkit以及Opera(欧朋)的Presto。其中,Presto是历史最悠久的内核。  目前微软的Trident在移...未完,继续阅读→

移动端Webkit

阅读(7538)条

input文字超出宽度用省略号显示2018/3/27 13:45:34

input文字超出宽度用省略号显示

有的时候的某段文本太长了,会影响整个的布局,很多人用动态语言来解决这个问题,但必须区分中文和英文,因为中文相当于两个英文字符长度,这样不仅繁琐,而且加重了服务器的负担。其实,我们完全可以使用CSS完美解决这个问题,单行比较好解决,多行由于只兼容webkit内核的浏览器所在不在这里讨论。语法:text-overflow : clip | ellipsis参数:clip :  不显示省略标记(...),而是简单的裁切(clip这个参数是不常用的!)ellipsis :  当对象内文本溢出时显示省略标记(...)说明:设置或检索是否使用一个省略标记(...)标示对象内文本的溢出...未完,继续阅读→

cssellipsis裁剪

阅读(16002)条

JavaScript对Json的增删改属性2018/3/19 11:06:32

JavaScript对Json的增删改属性

使用JS对Json数据的处理,朋友遇到需要对Json数据进行相关操作,然后自己实验了一下,顺便把一些其它操作也一起加了进来。代码如下:var arr=[{"site":"86y.org","type":"study"},{"site":"baidu.com","type":"seach"},{"site":"google.com","type":"seach"}];for(var i=0;i>arr.length;i++){if(arr[i]["site"]=="86y.org"){//修改Json中的site值,因为Json中存在site属...未完,继续阅读→

jsjson修改增加

阅读(6111)条

JS输入用户名自动显示邮箱后缀实例,兼容所有移动端2018/3/14 13:40:33

JS输入用户名自动显示邮箱后缀实例,兼容所有移动端

一、概述:这篇文章主要介绍了JS输入用户名自动显示邮箱后缀列表的方法,可实现自动显示邮箱后缀名列表的功能,非常具有实用价值,需要的朋友可以参考下原理:一个输入框 当我输入任何字的时候 自动下拉相应的邮箱提示,在输入框输入86y的时候 下拉框有所有对应的邮箱类型自动填充好了,点击选择下拉的邮箱就可以完成输入了,不需要填写邮箱后缀。经测试兼容所有移动端。效果如下:二、源代码如下:(预览地址:http://www.86y.org/demo/email_type.html)<!DOCTYPE HTML><html><head><meta http-equiv="Con...未完,继续阅读→

js邮箱移动端

阅读(8445)条

$(document).click 在iphone上不触发事件解决办法2018/3/14 10:51:26

 $(document).click 在iphone上不触发事件解决办法

<div class="name">点我</div>$(document).on("click", ".name", function() {alert("name");});以上代码在电脑浏览器和安卓上都能触发alert事件,但是在ios上却完全没有反应查阅了很多信息后,说是iphone这些元素上没有click事件,它是touch事件,就是说如果这个name标签是button的可click事件则是可以触发的,因为div本身默认不可点击1、有一个解决方法是给这个元素添加css.name{cursor:pointer;}这样是可以解决的2、但是如果你觉得粗暴的话,可以将click改为touchsta...未完,继续阅读→

bugjq

阅读(6081)条

关于区块链的入门教程2018/3/3 9:34:37

关于区块链的入门教程

区块链(blockchain)是眼下的大热门,新闻媒体大量报道,宣称它将创造未来。可是,简单易懂的入门文章却很少。区块链到底是什么,有何特别之处,很少有解释。下面,我就来尝试,写一篇最好懂的区块链教程。毕竟它也不是很难的东西,核心概念非常简单,几句话就能说清楚。我希望读完本文,你不仅可以理解区块链,还会明白什么是挖矿、为什么挖矿越来越难等问题。需要说明的是,我并非这方面的专家。虽然很早就关注,但是仔细地了解区块链,还是从今年初开始。文中的错误和不准确的地方,欢迎大家指正。一、区块链的本质区块链是什么?一句话,它是一...未完,继续阅读→

区块链教程

阅读(5604)条

ps导出渐进式jpg 来提升用户体验2018/2/1 16:38:15

ps导出渐进式jpg 来提升用户体验

1、概述jpg格式分为:Baseline JPEG(标准型)和Progressive JPEG(渐进式)。两种格式有相同尺寸以及图像数据,扩展名也是相同的,唯一的区别是二者显示的方式不同。Baseline JPEG(标准型)直观感觉为:Progressive JPEG(渐进式)直观感觉为: 两种格式区别:渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓,一定程度上可以提升用户体验。另外渐进式的图片的大小并不会和基本的图片大小相差很多,有时候可能会比基本图片更小。 2、生成Progressive JPEG(渐进式)在photoshop中有“存储为w...未完,继续阅读→

ps体验

阅读(9759)条

【C#】错误“System.NullReferenceException:未将对象引用设置到对象的实例“解析2018/1/19 16:00:02

【C#】错误“System.NullReferenceException:未将对象引用设置到对象的实例“解析

错误原因分析  首先,你要知道,在.net里面所有操作的变量都是对象。   一般的标示符,如int,string,char等等,最后都会转换为System命名空间下面的类名(如Int32,String,Char等等),当然类实例化的就更不用说了。对象就必然存在若干的属性和方法。你要操作一个对象,也必然是操作它的属性或者方法。   “未将对象引用设置到对象的实例”,也就是说你要调用对象实例里面不存你要操作的属性或者方法,而在确定你的对象里面有你要操作的属性或者方法,但是仍然报错,就多半是你操作的对象变成null了。因为null实际上...未完,继续阅读→

net错误

阅读(8871)条

js文字从右往左无限滚动 支持PC,移动端2017/12/25 10:49:31

js文字从右往左无限滚动 支持PC,移动端

一、概述:关于文字滚动插件太多,PC跟移动端使用来能同时兼容的并不多,基于以上原因自己还是动手写了一个单纯的文字从右向左滚动的DEMO,思路来源于上一篇《小程序 文字从右往左无限滚动》。一个页面支持多个滚动。二、实现过程:1、解决思路:如果宽度滚动小于文字内容宽度,则滚动,反之停止。默认是只有一条标签,但是在实现过程中需要最好需要二条来实现,所以js会自动添加一条相同的内容。滚动的时候最好的方法不是让它滚完,而是当第一条滚动完后,同于第一条和第二条是无缝的,所以重新又从第一个内容开始滚动,切换时完全看不出来有...未完,继续阅读→

js插件滚动

阅读(15715)条

小程序 文字从右往左无限滚动2017/12/7 16:20:21

小程序 文字从右往左无限滚动

一、概述:由于小程序里面使用的都是变量控制,所以使用起来比较难掌握,今天做了一个文字从右向左滚动的实例,写法比较简单。效果如下图所示:二、实现过程:1、解决思路:一共两个text控件,当第一个text滚动完后应该是看到第二个text控件了,但是在这个时候最好的方法不是让它滚完,而是用重新又从第一个text控件开始滚动,控制起来超级简单,基本实现了跑马灯的效果,另外加了一个如果文字不足一屏,不执行跑马灯的效果,而且添加了超大的间距,解决不会显示重复内容。以下是各部分完整代码,只要复制代码添加到相应页面即可看到效果。2、...未完,继续阅读→

小程序实例滚动

阅读(23796)条

小程序 swiper 图片高度自适应+预览图片2017/12/5 11:34:13

小程序 swiper 图片高度自适应+预览图片

一、概述:在开发小程序的项目中,经常会用到swiper这个轮播组件,但是使用的时候会有一个问题,swiper系统会默认一个高度而且是px为单位的,如下:swiper { display:block; height:150px;}这些参数可以用其它样式覆盖,但是图片不可能固定高度。image的高度是无法用px固定单位,一般是宽固定 rpx,mode="widthFix" 高度自适应。下面就开始介绍如何用图片在swiper自适应高度,而不会被遮住。实际效果图如下:二、实现过程:1、小程序布局页面wxml<view class="container"> <swiper bindchange=&quo...未完,继续阅读→

小程序swiper图片

阅读(17754)条

百度地图 js 检索屏幕区域 周边信息2017/12/2 13:50:33

百度地图  js 检索屏幕区域 周边信息

一、概述:最近刚刚做一个新的项目,是关于房地产的,用到了百度地图周边检索信息:如该坐标点附近的:学校、医院、地铁、公交、银行、休闲等一些设施需要切换显示出来。走了很多弯路,最初还是看人家怎么做的,然后模仿着做。最终还是从新找了新的方法,适合自己的才是好方法(底部附完整源码下载及演示链接)。效果如下图所示:二、需求分析及核心代码1、首先以坐标点为中心,在该屏幕区域内的坐标:var bs = map.getBounds(); //获取可视区域var bssw = bs.getSouthWest(); //可视区域左下角var bsne = bs.getNorthEast(); //可视区域...未完,继续阅读→

地图源代码js

阅读(11094)条

微信小程序组件 使用button更有效的 打开客服会话2017/11/6 10:04:41

微信小程序组件 使用button更有效的 打开客服会话

一概述:本文不介绍如何开启客服,而是如何打开客服会话,本来使用contact-button控件是可以实现的,介是有效区域太小,所以还是得找替换方法,button是可以支持的只是在测试的时候需要用真机打开才会有效果,所以很多人在用contact-button来做,什么多放一些contact-button来增大有效点击区域,真是太无语了。二、以下是介绍两种使用方法:1、使用button来打开客服会话(本人推荐)button参数说明<view class="deg"><button open-type="contact" session-from="weapp"><image src=&q...未完,继续阅读→

小程序button客服

阅读(22113)条

当前第  2  页 / 共  41  页  总共808条记录  

12345678