个人基层笔记

mac2024-04-22 6

` position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 120px; height: 120px; background-color: #ff266e; display: flex; flex-direction: column;

上传图片 ```c uni.uploadFile({ url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址 filePath: tempFilePaths[0], name: 'file', formData: { 'user': 'test' }, success: (uploadFileRes) => { console.log(uploadFileRes.data); } }); 数据解析当用了join时候得出的数据 JSON.parse() init(){ //value 初始格式{label:"张三,李四,王五",value:"1,2,3"} var jsonStr=this.value; if(!jsonStr) return; var json=eval("(" + jsonStr +")"); let label=json.label; let val=json.value; if(!label) return; this.treelist.label = label.split(",") this.treelist.value = value.split(",") },

input回车键调用 @confirm=“onSubmit” div设内边距不会撑大 box-sizing: border-box;

input验证

输入大小写字母、数字、下划线： <input type="text" οnkeyup="this.value=this.value.replace(/[^\w_]/g,'');"> 输入小写字母、数字、下划线： <input type="text" οnkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');"> 输入数字和点 <input type="text" οnkeyup="value=value.replace(/[^\d.]/g,'')"> 输入中文: <input type="text" οnkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"> 输入数字: <input type="text" οnkeyup="this.value=this.value.replace(/\D/g,'')"> 输入英文: <input type="text" οnkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')"> 输入中文、数字、英文: <input οnkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')"> 输入数字和字母： <input onKeyUp="value=value.replace(/[\W]/g,'')"> 除了英文的标点符号以外，其他的都可以中文，英文字母，数字，中文标点 <input type="text" οnkeyup="this.value=this.value.replace(/^[^!@#$%^&*()-=+]/g,'')"> 只能输入数字代码(小数点也不能输入) <input οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> 只能输入数字,能输小数点. <input οnkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"> <input name=txt1 οnchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}"> 数字和小数点方法二 <input type=text t_value="" o_value="" οnkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" οnkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" οnblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"> 只能输入字母和汉字 <input οnkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers"> 只能输入英文字母和数字,不能输入中文 <input οnkeyup="value=value.replace(/[^\w\.\/]/ig,'')"> 只能输入数字和英文 <input onKeyUp="value=value.replace(/[^\d|chun]/g,'')"> 小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号: <input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false"> 小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号: <input οnkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

工具提示格式报错问题。很麻烦经常用到的宽度样式宽度：width: calc(100% - 250px);

时间毫秒转换成Y+M+D+h+m+s

每隔1秒在执行

setTimeout(function(){ that.count()//执行方法 },1000)

根据什么直来判断显示什么

<div>{{serv | sectext}}</div> filters: { sectext: function(value) { if (value == 1) { return "男"; } if (value == 2) { return "女"; } }, },

如何不用定宽度的span居中

用iframe来嵌套一个网页

打印数据

console.log(“打印”) console.log(JSON.stringify(this.a))

获得vuex state里面的数据

import { mapState } from "vuex"; import { mapMutations } from "vuex"; computed:{ ...mapState({ Routelist: state => state.route.Routelist, //获得数据 }), }, methods: { ...mapMutations("route", ["dafaclick"]),//拿vuex的方法 //可以直接调用 this.dafaclick(this.a),//调用传数据改变 }

刷新vuex里面的state保持数据不被清空在app.vue

created () { // 在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store")))) } // 在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload",()=>{ sessionStorage.setItem("store",JSON.stringify(this.$store.state)) }) },

选择器

.my-Order-b ul li span:first-child//第一个span .my-Order-b ul li span:nth-child(2)//第二个

点击定位

<!DOCTYPE html> <html> <head> <title>app</title> </head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <style> a{text-decoration:none;} .dist{display: none!important} .active{color: red!important} .content{height: 30rem;} .flails{background-color: #F5F5F5;position: fixed;right: 1rem;top:35%;border-radius: 8px;padding: 0rem 0.5rem 0rem 0.5rem} .flails a{color: black;display: block;width: 100%;text-align: center;line-height: 3rem;} .flails_x{cursor:pointer;font-style:normal;display: block;width:1rem;height: 1rem;border-radius: 50%;overflow: hidden;background-color: red;line-height:0.85rem;text-align: center;color: white;font-size: 15px;float: right;position: absolute;top: -0.5rem;right: 0rem;} .flails_d{cursor:pointer;font-style:normal;display: block;width:1rem;height: 1rem;border-radius: 50%;overflow: hidden;background-color:#00BFFF;line-height:1rem;text-align: center;color: white;font-size: 12px;float: right;position: absolute;top: -0.5rem;right: 0rem; } </style> <script> $(document).ready(function(){ $(".hover > a").click(function(){ $(this).addClass("active").siblings("a").removeClass("active"); }); $(".flails_x").click(function(){ $(this).addClass("dist"); $('.hover').addClass("dist"); $('.flails_d').removeClass("dist"); }) $(".flails_d").click(function(){ $(this).addClass("dist"); $('.hover').removeClass("dist"); $('.flails_x').removeClass("dist"); }) }) </script> <body> <div id="app">  <div class="flails"> <i class="flails_x">x</i> <i class="flails_d dist">√</i> <div class="hover"> <a href="#a1" class="active">项目信息</a> <a href="#a2">合同信息</a> <a href="#a3">阶段信息</a> <a href="#a4">总结信息</a> </div> </div> <div id="a1"> <span>项目信息</span> <div class="content">项目信息内容</div> </div> <div id="a2"> <span>合同信息</span> <div class="content">合同信息内容</div> </div> <div id="a3"> <span>阶段信息</span> <div class="content">阶段信息内容</div> </div> <div id="a4"> <span>总结信息</span> <div class="content">总结信息内容</div> </div> </div> </body> </html>

画一个三角形

#triangle{ width:0; height:0; border-width:0px 60px 60px 60px; border-style:solid; border-color:transparent #FAEBD7 transparent transparent; position: absolute; z-index: 999; left:100%; margin-left:-120px; } #triangle i{ color:white; font-size: 13px; transform:rotate(45deg); display: block; width: 90px; text-align: center; line-height:35px; }

将字符串劈开

icon={a,b,c} const a=this.icon.split(',')

拨打电话号码

cal(){ var call= document.getElementById("call").innerHTML; api.call({ type: 'tel_prompt', number:call }); },

判断一个字符串是否含有htttp

img.includes('http')

在数组添加

app.attrIds.splice(index,1,id);//在attrIds[1]添加id数据

div内显示一行

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

div内显示两行或三行，超出部分用省略号显示

overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;（行数） -webkit-box-orient: vertical;

样式替换

！important

vue生命周期：

beforeCreate（创建前）, created（创建后）, beforeMount(载入前), mounted（载入后）, beforeUpdate（更新前）, updated（更新后）, beforeDestroy（销毁前）, destroyed（销毁后） <script> var myVue = new Vue({ el: "#app", data: { a: "Vue.js" }, beforeCreate: function() { console.log("创建前") console.log(this.a) console.log(this.$el) }, created: function() { console.log("创建之后"); console.log(this.a) console.log(this.$el) }, beforeMount: function() { console.log("mount之前") console.log(this.a) console.log(this.$el) }, mounted: function() { console.log("mount之后") console.log(this.a) console.log(this.$el) }, beforeUpdate: function() { console.log("更新前"); console.log(this.a) console.log(this.$el) }, updated: function() { console.log("更新完成"); console.log(this.a); console.log(this.$el) }, beforeDestroy: function() { console.log("销毁前"); console.log(this.a) console.log(this.$el) console.log(this.$el) }, destroyed: function() { console.log("已销毁"); console.log(this.a) console.log(this.$el) } }); </script> uni.setStorageSync('openSessionKey', "卡普先生");//储存数据 var api=uni.getStorageSync("openSessionKey");//获取数据

网页版打开qq对话

因为我是自己的qq所以不能自己对话设置qq网站：https://shang.qq.com/v3/widget.html

数组中删除元素

// 删除一个5 var arrayList = [1,2,3,4,5,6,7,8,9]; for (var i=0; i<arrayList.length; i++){ if(arrayList[i]==5){ arrayList.splice(i,1); } } /** arrayList==[1,2,3,4,6,7,8,9] */ ---------------------------------------------------------------- //删除两个5 var arrayList = [1,2,3,4,5,5,6,7,8,9]; for (var i=0; i<arrayList.length; i++){ if(arrayList[i]==5){ arrayList.splice(i,1); i--; } } /** arrayList==[1,2,3,4,6,7,8,9] */

数组中删除元素连接：https://blog.csdn.net/qq_41974199/article/details/102940261

输出最大

for(var i=0;i<=this.alert.length;i++){ for(var j=1;j<=this.alert.length-i;j++){ if(this.alert[i]>this.alert[j]){ this.min=this.alert[i]; this.alert[j]=this.alert[i]; this.alert[i]=this.min; } } }

输出最小

cokco:function(){ for(var i=0;i<=this.alert.length;i++){ for(var j=1;j<=this.alert.length-i;j++){ if(this.alert[i]<this.alert[j]){ this.min=this.alert[i]; this.alert[j]=this.alert[i]; this.alert[i]=this.min; } } } console.log(this.min) }

小到大排

cokco:function(){ for(var i=0;i<=this.alert.length;i++){ for(var j=0;j<=this.alert.length-i;j++){ if(this.alert[j]>this.alert[j+1]){ this.min=this.alert[j]; this.alert[j]=this.alert[j+1]; this.alert[j+1]=this.min; } } } console.log(this.alert) }

去重复数据

data:{ return{ array:[2,2,3,3,4,4,5,5,9,8,7] } } congfu:function(){ var n = [ ]; //一个新的临时数组 //遍历当前数组 for(var i = 0; i < this.array.length; i++){ //如果当前数组的第i已经保存进了临时数组，那么跳过， //否则把当前项push到临时数组里面 if (n.indexOf(this.array[i]) == -1) n.push(this.array[i]); } console.log(n) }

//正则大于等于300

inputPattern:/^([3-9]\d{2}|[1-9]\d{3,})(\.\d+)?$/,

最新回复(0)