web前端开发
锦瑟丨年华
专注web前端开发
展开
-
js工具箱
js工具箱1、判断浏览器的innerText或textContent属性 function setcontent(element,content){ if(typeof element.innerText === "string"){ return element.innerText = content; }else { return element.textContent = content; } }; 2、获取页面的当中可视区.原创 2020-10-29 18:00:49 · 1026 阅读 · 0 评论 -
vue中调用微信登录(二次封装组件)
<template><div> <iframe scrolling="no" width="300" height="400" frameBorder="0" allowTransparency="true" :src="setSrc"></iframe></div></template><script>export default { data() { return {原创 2020-09-14 17:34:50 · 571 阅读 · 0 评论 -
给页面添加水印
这里使用了vue中的自定义指令main.js // vue 全局指令 --- 模块/组件式添加水印 Vue.directive('watermark',(el,binding)=>{ function addWaterMarker(str,parentNode,font,textColor){// 水印文字,父元素,字体,文字颜色 var can = document.createElement('canvas'); parentNode.ap.原创 2020-06-03 16:00:01 · 448 阅读 · 0 评论 -
electron添加windows托盘图标和菜单
import { app, BrowserWindow, Menu, Tray} from 'electron'const path = require('path');//托盘对象var appTray = null;if (process.env.NODE_ENV !== 'development') { global.__static = path.join(__dirname, '/static').replace(/\\/g, '\\\\')}let原创 2020-06-03 15:27:46 · 2814 阅读 · 2 评论 -
electron主进程与渲染进程进行通信
主进程向渲染进程发送消息主进程发送消息(main=>index.js) mainWindow = new BrowserWindow({ height: 750, width: 1100, center: true, // 是否出现在屏幕居中的位置 useContentSize: true, frame:false,//设置为 false 时可以创建一个无边框窗口 resizable:true,//窗口是否可以改变尺.原创 2020-06-03 15:21:47 · 592 阅读 · 0 评论 -
利用nginx搭建静态资源服务器
配置如下:server { listen 7082;#监听端口 server_name localhost;#监听域名 charset utf-8;#指定网页的编码格式 location / { root /usr/share/staticfile; autoindex on; }}预览效果...原创 2020-04-17 14:37:59 · 249 阅读 · 0 评论 -
发布npm包
1、生成package.json文件npm init2、在根目录下新建index.js文件导出我们的插件:module.exports = require('./lib');3、新建lib文件夹,并编写需要发布的插件,这里以vue为例:3.1新建index.js文件引入编写完成的组件import areaSelect from './plugins/AreaSelec...原创 2020-03-31 16:12:58 · 189 阅读 · 1 评论 -
自定义vue图片预览缩放组件
<template> <div id='zoompic'> <div class="zoom-img"> <img ref="Img" :src="imgurl" @mousedown="move"> <span class="closeIcon" @click="clos...原创 2020-03-31 15:12:48 · 498 阅读 · 0 评论 -
编写自己的js工具库
1、判断浏览器的innerText或textContent属性function setcontent(element,content){ if(typeof element.innerText === "string"){ return element.innerText = content; }else { return element.text...原创 2020-03-30 17:37:53 · 977 阅读 · 0 评论 -
vue中使用微信聊天表情
vue中使用微信聊天表情1、先准备好表情数据,新建emjoydata.js文件。 export const emojisAmap = { "微笑": "emojis_0", "撇嘴": "emojis_1", "色": "emojis_2", "发呆": "emojis_3", "得意": "emojis_4", "流泪":...原创 2020-03-26 11:47:37 · 9146 阅读 · 34 评论 -
使用cordova进行App打包
使用cordova进行App打包。 说明:这里只介绍android打包方式。 准备条件: 你需要安装的环境有:java环境,python环境,android环境,以及gradle环境。当然Node.js是必须的。 以上环境安装方法可自行百度,环境安装完成后,可执行以下命令即可打包Appcordova create <你的工作目录名称>成功后切换到你新建的目录下,再运行:c原创 2017-11-19 17:07:25 · 786 阅读 · 0 评论 -
解决IIS启动后报<modules>错误的方案。
可以点击win键右键以管理员身份运行,输入以下代码,回车即可。C:\windows\system32\inetsrv\appcmd unlock config -section:system.webServer/modules原创 2017-11-04 14:34:42 · 1251 阅读 · 0 评论 -
Jquery 1.9.0 以上版本扩展$.browser无法使用的问题
由于jquery 1.9.0 以上版本 jquery去掉了对 .browser的支持,采用.browser 的支持,采用.support 来判断浏览器类型。导致之前的很多插件都报错,这里给出解决方案。 可以通过对jquery 1.11.1版本 进行扩展 使其支持 $.browser 方法,从而使插件支持jquery各版本。jQuery.extend({ browser: funct原创 2017-11-04 14:26:11 · 373 阅读 · 0 评论 -
IE不支持 ES6 Promise 对象的解决方案
解决Promise对象不被IE识别的问题使用:bluebird.js即可完美解决。亲测有效。。。。原创 2017-11-11 14:20:28 · 11192 阅读 · 2 评论 -
前端神器Promise的用法介绍
说起Promise相信大家都知道,它有一个很好的用法,就是可以在ajax请求之外对数据进行操作,避免了多层ajax的嵌套,可以使代码阅读起来更直观,下面是Promise的用法。queryJydj(accom1);function queryJydj(acc0m1) { //console.log(acc0m1); var ACC0M1 = { "ACC0M1":原创 2017-11-11 14:03:44 · 2196 阅读 · 0 评论 -
Require.js用法
require.js用法说明 用法一:先直接引入require.js,在使用data-main引入相应的js文件。例如:<script src="require.js" data-main="main"></script>这里不需要加后缀.js,因为require.js会默认查找.js的文件。 用法二:分开引入,这里需要加.js后缀。例如:<script src="require.js"原创 2017-10-08 15:45:45 · 1558 阅读 · 0 评论 -
IE下 jquery的fadeIn与fadeOut方法失效的BUG
IE下 jquery的fadeIn与fadeOut方法失效的BUG 这个问题遇到过好多次,因为没有做笔记,所以每次遇到这个问题都要研究半天。好记性不如烂笔头,这话一点没错。解决方案:第一步:在fadeIn()之前动态的将其position属性改为relative; 会解决IE7下的这个bug$('.fadein').css('position', 'relative').fadeIn();原创 2017-08-13 12:35:09 · 1218 阅读 · 0 评论 -
iE浏览器使用new Date()方法,会返回NAN
iE浏览器使用new Date()方法,会返回NAN 问题描述:在IE下使用newData()方法时会返回NAN,(破浏览器)解决方案: /*按出生日期算年龄*/ function birthDataChangeAge( date ){ if(date=="" || date == undefined){ return ""; }原创 2017-08-13 12:29:47 · 1036 阅读 · 0 评论 -
IE下无法使用半透明rgba的问题及解决方案
IE下无法使用半透明rgba的问题及解决方案 问题描述:ie浏览器下半透明效果无法使用,(什么鬼,破浏览器),无解了吗?No No No!当然是有办法的啦。解决方案:使用IE专有方法进行模拟,代码如下:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b6b7b9',endColorstr='#87898c',原创 2017-08-13 12:26:35 · 779 阅读 · 0 评论 -
关于IEajaxpost请求无法获取数据的BUG
关于IEajaxpost请求无法获取数据的BUG问题描述:上个星期接手了一个网站,要求兼容ie,使用的是jquery,其中获取数据的部分采用了jquery的ajax方法。但是问题来了,我用post请求拿回了数据,并且在chrom,firefox和ie10+浏览器上使用时都没有问题。 但是但是当我在ie9及以下浏览器测试的时候,发现数据没了,(我去,这不科学啊),难道是我写错了? 于是我原创 2017-08-13 12:21:31 · 2722 阅读 · 0 评论 -
把jquery引入sea.js或require.js的方法
现在模块化基本上已经深入人心了,所以我们一般都会使用一些模块化的工具例如sea.js,require.js那么如何将jquery引入到其中进行使用呢。废话不多说了,直接上代码:将jquery引入sea.js的方法,直接在sea.js的源码中加入以下代码即可.if ( typeof define === "function" ) { define(function(){return jQuer原创 2017-09-23 13:49:17 · 1479 阅读 · 0 评论 -
使用ajax实现注册业务
这里使用ajax实现注册业务,代码如下:/*注册*//*这里不做加密处理,如有需要可自行加密账户和密码*/var number = $.trim($("#num").text()).toUpperCase();var password = $.trim($("#password").text());/*注册*/var promise, data;$.ajax({ type原创 2017-09-16 21:23:38 · 470 阅读 · 0 评论 -
使用ajax实现登录业务
上周用angular做了登录和注册业务,但是因为里边有许多插件,比较复杂,所以这里将其抽离出来,希望对大家有所帮助。 废话不多说,直接上代码。/*这里不做加密处理,如有需要可自行加密账户和密码*/var number = $.trim($scope.data.number).toUpperCase();var password = $.trim($scope.data.password);/原创 2017-09-16 21:20:40 · 454 阅读 · 0 评论 -
使用ajax实现发送验证码业务
这里实现用ajax发送手机验证码的业务和功能,代码如下://点击获取验证码 document.getElementById("btnyzm").onclick=function(){ //如果在正在发送则不能发送 var t =this.innerHTML.indexOf('重'); if(t==0){ return;原创 2017-09-16 21:40:51 · 1913 阅读 · 0 评论 -
less语法介绍
Less语法介绍一. 环境的安装。 1.先安装node.js。在node.js官网下载安装node.js。安装完成后按win+R键打开cmd命令行窗口,输入node -v,如果出现版本号证明node.js安装成功。 2.安装less环境。使用命令npm install less -g全局安装less。安装完成后输入命令lessc -v出现版本号证明less安装成功。 3.手动编译le原创 2017-10-07 20:25:28 · 1981 阅读 · 0 评论 -
Javascript实现拍照上传压缩,旋转
使用exif.js实现拍照上传并压缩旋转 1.先引入必须的文件<script src="jquery.js"></script><script src="exif-2.3.0.js"></script><script src="pressImg.js"></script> 2.html代码<input type="file" id="choose" accept="image/*">原创 2017-10-08 15:45:01 · 1854 阅读 · 0 评论 -
用soapUI测试GET/POST接口
方法/步骤: 1.新建soapUI工程:右击左侧导航面板中的工作空间节点“File”,选择“New soap Project”,输入工程名称,点击OK。 2.在工程名上右键点击,选择“NewTestuite”,在弹出框输入名称,点击确定。 3.在内层文件上右键点击选择”NewTestCase”,在弹出框输入名称,点击确定。 4.在内层文件中右键点击选择“AD原创 2017-10-28 17:19:59 · 15336 阅读 · 0 评论 -
解决IE下跨域的问题
有时候我们在开发中会遇到一些奇葩的问题不知道从何下手,比如在在调一个接口的时候,在其它浏览器上完美显示,然而到了IE上你会发现,完全调不通,这就懵逼了。难道代码写错了,不应该啊,为什么其它浏览器可以掉通呢?不用想了,极有可以可能是跨域问题,这时可一添加以下语句。jQuery.support.cors = true;//针对使用jquery的同学原创 2017-10-29 15:11:08 · 2682 阅读 · 0 评论 -
获取当前浏览器的当前时间,包括时、分、秒(可用作倒计时)
/*获取当前日期信息*/ getDayTime: function () { var d = new Date(); var year = d.getFullYear(); var month = d.getMonth() + 1; var date = d.getDate();原创 2017-10-29 15:13:31 · 4633 阅读 · 0 评论 -
angular配合gulp进行代码打包和压缩
这里说一下angular代码配合gulp的打包流程,首先要下载gulp,使用npm全局安装。当然要配合node.js使用。这里说下打包的问题。刚开始是打算将所有代码打包到一起,经过一番努力之后终于打包完成,但是我发现了一个严重的问题,那就是打包到一起的代码并不能很好的运行(页面直接炸掉了),后来找到了原因,是因为我把所有的html代码打包到一起之后破坏了原有Controller和congig中的引用原创 2017-08-27 18:10:40 · 3568 阅读 · 0 评论