汇总二，js系列-css系列-其他综合系列
目录
js系列：
1、js下载图片功能
2、base64加密
3、获取外网IP地址，动态创建script标签
4、非空正则式
5、js阿拉伯数字转大写，大写转数字
6、js获取地址栏参数
小程序
1、图片预览wx.previewImage(Object object) | 微信开放文档
2、小程序阻止冒泡
3、小程序上传图片
css系列
1、css 关于一键置灰效果 filter: grayscale(100%)
其他综合系列
1、终端连接阿里云命令记录
2、mac版本的FTP连接工具（FileZilla）
3、mac版本连接服务器工具（免费）ZenTermLite（App Store搜索下载）
4、移动端适配，第三方插件（postcss-pxtorem）
与代码无关的小功能技巧：
1、如何彻底删除某个软件
js系列：
1、js下载图片功能
onDownload(imgur){var name = `${new Date().getTime()}.jpg`;let a = document.createElement("a");a.style.display = "none";a.download = name;a.href = imgur;//图片地址document.body.appendChild(a);a.click();a.parentNode.removeChild(a)}2、base64加密
npm install --save js-base64
import {Base64} from 'js-base64';let a=Base64.encode('哈哈')console.log(a)3、获取外网IP地址，动态创建script标签
//把这段加入到script里面去
src:'http://pv.sohu.com/cityjson?ie=utf-8'let a=returnCitySN['cip']
console.log(a)
//或者动态创建标签
let url='http://pv.sohu.com/cityjson?ie=utf-8'
loadScript (url) {return new Promise((resolve, reject) => {const script = document.createElement('script')script.onload = () => resolve()script.onerror = () => reject(new Error(`Load script from ${url} failed`))script.src = urlconst head =document.head || document.getElementsByTagName('head')[0];(document.body || head).appendChild(script)})
}let a=returnCitySN['cip']
console.log(a)注意：有静态页面的就直接放静态的script标签
或使用：（接口形式获取地址，碎碎念：这个比搜狐的好使，最近真的搜狐太不稳定了）
getApi(){return axios.get('https://api.ipify.org/');
}4、非空正则式
/\S/
5、js阿拉伯数字转大写，大写转数字
阿拉伯数字转中文数字
//阿拉伯数字转中文数字noToChinese:function (num) {if (!/^\d*(\.\d*)?$/.test(num)) {return "Number is wrong!";}var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九");var BB = new Array("", "十", "百", "千", "万", "亿", "点", "");var a = ("" + num).replace(/(^0*)/g, "").split("."),k = 0,re = "";for (var i = a[0].length - 1; i >= 0; i--) {switch (k) {case 0:re = BB[7] + re;break;case 4:if (!new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0]))re = BB[4] + re;break;case 8:re = BB[5] + re;BB[7] = BB[5];k = 0;break;}if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0) re = AA[0] + re;if (a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k % 4] + re;k++;}// if (a.length > 1) //加上小数部分(如果有小数部分)// {// re += BB[6];// for (var i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)];// }return re;}大写转数字
ChineseToNumber:function(chnStr){var chnNumChar = {零:0,一:1,二:2,三:3,四:4,五:5,六:6,七:7,八:8,九:9};var chnNameValue = {十:{value:10, secUnit:false},百:{value:100, secUnit:false},千:{value:1000, secUnit:false},万:{value:10000, secUnit:true},亿:{value:100000000, secUnit:true}}var rtn = 0;var section = 0;var number = 0;var secUnit = false;var str = chnStr.split('');for(var i = 0; i < str.length; i++){var num = chnNumChar[str[i]];if(typeof num !== 'undefined'){number = num;if(i === str.length - 1){section += number;}}else{var unit = chnNameValue[str[i]].value;secUnit = chnNameValue[str[i]].secUnit;if(secUnit){section = (section + number) * unit;rtn += section;section = 0;}else{section += (number * unit);}number = 0;}}return rtn + section;}6、js获取地址栏参数
let location = window.location.href;
var a1=location.length;
var a2=location.indexOf('=')
if(a2!=-1){//默认获取=后面的字段，如果只有一个参数可以直接使用let str=location.slice(a2+1,a1)
console.log(str)
//如果还有其他参数的话
let aa=str.split('&')
let bb=aa[1].split('=')
console.log(aa,'----55---',bb)
}小程序
1、图片预览wx.previewImage(Object object) | 微信开放文档
<image src="{{item}}" mode="scaleToFill" bindtap="onimgShow" data-index="{{index}}"></image>data: {imglist:[],
},
onimgShow(e){ let index=e.currentTarget.dataset.index;wx.previewImage({current:this.data.imglist[index],// 当前显示图片的 http 链接urls:this.data.imglist// 需要预览的图片 http 链接列表})
}2、小程序阻止冒泡
<view class="flex flex_align_center" bindtap="bindUploadBut"><text wx:if="{{!fullFilePath}}" class="{{footIndex==2?'activeUpload':''}}">去上传</text><image wx:if="{{fullFilePath}}" mode="aspectFill" src="{{fullFilePath}}" class="scaleImg" catchtap="onimgShow" data-image="{{fullFilePath}}"></image><view class="iconfont icon-youjiantou"></view>
</view>事件说明：
bindtap 和 catchtap 都属于点击事件，绑定之后，点击组件是可以触发这个函数的。
bindtap ：子元素使用bindtap绑定事件后，执行的时候，会冒泡到父元素（触发父元素上绑定的bingtap事件）
catchtap ：不会冒泡到父元素上，阻止事件冒泡
3、小程序上传图片
let that=this;wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album'],//选择的形式（相册）success (res) {// tempFilePath可以作为 img 标签的 src 属性显示图片let query = {}let hostUrl = app.$api.hostUrl()wx.uploadFile({url: `${hostUrl}/file/upload`, // 上传的服务器接口地址filePath: res.tempFilePaths[0],name: 'mFiles', //上传的所需字段，后端提供(看后台定义的啥)header: {'X-TOKEN': token//需要token就传},formData: query,success: (ress) => {console.log(ress)},fail: (err) => {wx.showToast({title: '上传失败',icon: 'none',duration: 3000})}});}})css系列
1、css 关于一键置灰效果 filter: grayscale(100%)
.grey{-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);
}其他综合系列
1、终端连接阿里云命令记录
终端连接。 ssh root@ip地址
2、mac版本的FTP连接工具（FileZilla）
Download FileZilla Client for macOS
3、mac版本连接服务器工具（免费）ZenTermLite（App Store搜索下载）
3.1查看所有文件命令 ls ， ls -a查看所有没有隐藏文件
3.2上传文件命令 rz -r（仅上传） rz -y (可替换同名文件)
3.3删除 rm -rf 文件名称
3.4解压压缩命令 unzip 文件名称
4、移动端适配，第三方插件（postcss-pxtorem）
npm install postcss-pxtorem -D注：
-S是save的简写
-D是save-dev的简写
- 在package.json文件里面体现出来的区别就是，使用–save-dev安装的插件，被写入到devDependencies对象里面去，而使用–save安装的插件，则被写入到dependencies对象里面去。
区别（devDependencies与dependencies）：
- devDependencies 里的插件只用于开发环境，不用于生产环境
- dependencies是需要发布到生成环境的
与代码无关的小功能技巧：
1、如何彻底删除某个软件
（比如发现内存不够了需要整理出内存要删掉不需要的软件，发现软件删除了，内存并没有释放很多的时候，进行深度删除）
1、快速进入文件夹
在Finder窗口按住Shift+Command+G
2、输入~/资源库/Application Support/你的文件夹名称（软件文件名称），回车
如：~/资源库/Application Support/Steam
3、直接删除软件文件夹
汇总二，js系列-css系列-其他综合系列相关推荐
- HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...
canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 str ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- 七步走 Angular.js 从菜鸟到专家 （系列列表）
Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的S ...
- 网页设计作业成品 HTML+CSS+JS大作业——汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
HTML+CSS+JS大作业--汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作 文章目录 HTML+CSS+JS大作业--汽车保险销售综合商城(4 ...
- 前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)...
arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...
- WEB前后端交互原型通用元件库、常用组件、信息输出、信息输入、信息反馈、综合系列、页面交互、首页、分类页、内容详情、用户中心、注册登录、找回密码、元件库、web元件库、rplib、axure
WEB前后端交互原型通用元件库.常用组件.信息输出.信息输入.信息反馈.综合系列.页面交互.首页.分类页.内容详情.用户中心.注册登录.找回密码.元件库.web元件库.rplib.axure原型 we ...
- （二）surging 微服务框架使用系列之surging 的准备工作consul安装（转载 https://www.cnblogs.com/alangur/p/8377977.html）...
(二)surging 微服务框架使用系列之surging 的准备工作consul安装 suging 的注册中心支持consul跟zookeeper.因为consul跟zookeeper的配置都差不多, ...
- CSS字体系列(CSS、HTML)
CSS字体系列(CSS.HTML) <!DOCTYPE html> <html lang="en"><head><meta charset ...
最新文章
- SAP MM 史上最偷懒的盘点事务代码MI10
- 好用的UE新资源！【地貌资源】
- windows 下使用 Filezilla server 搭建 ftp 服务器
- SpringBoot笔记整理（三）
- 5大AI主题，资助20-30项 | 2022腾讯AI Lab犀牛鸟专项研究计划开放申请中
- 银行家算法课程设计（附源代码）
- 复利计算1.0-2.0-3.0
- 高手的作用在于解决难题
- 小米商城网页制作代码
- Python开发制作酷狗和QQ音乐下载器
- 【java】java intellij idea 破解
- 多表联查时的条件筛选
- PX4 Position_Control RC_Remoter引入
- net.sf.ezmorph.bean.MorphDynaBean cannot be cast to
- TensorFlow之文本分类算法-2
- 用对象流把对象存到文件中，再从文件中读取出来打印。
- 病毒对信息社会的巨大影响
- iOS开发 01-前言 03前景和难易度分析
- 医疗器械图纸管理软件，图文档管理解决方案
- 免费主机屋空间mysql和mssql数据库备份和还原技巧