肿瘤康复网,内容丰富有趣,生活中的好帮手!
肿瘤康复网 > 汇总二 js系列-css系列-其他综合系列

汇总二 js系列-css系列-其他综合系列

时间:2023-06-07 13:45:18

相关推荐

目录

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-base64import {Base64} from 'js-base64';let a=Base64.encode('哈哈')console.log(a)

3、获取外网IP地址,动态创建script标签

//把这段加入到script里面去src:'/cityjson?ie=utf-8'let a=returnCitySN['cip']console.log(a)//或者动态创建标签let url='/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('/');}

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、终端连接阿里云命令记录

终端连接。sshroot@ip地址

2、mac版本的FTP连接工具(FileZilla)

Download FileZilla Client for macOS

3、mac版本连接服务器工具(免费)ZenTermLite(App Store搜索下载)

3.1查看所有文件命令lsls -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系列-其他综合系列》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。