个人基层笔记

最新推荐文章于 2024-03-05 12:05:35 发布

Establish_bug

最新推荐文章于 2024-03-05 12:05:35 发布

阅读量763

点赞数

本文链接：https://blog.csdn.net/Establish_bug/article/details/102837183

版权

switch判断
alert(){
switch(a){
case 1:
//处理方法
break;

}
}

` 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

function timestampToTime(timestamp) {
				var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() + ':';
				var s = date.getSeconds();
				return Y+M+D+h+m+s;
			}
			this.endtime = timestampToTime(this.item.denTime)

 checkTime:function(i){
			       if (i<10){
			           i="0" + i
			       }
			       return i;
			    },
			 confirm:function(value){
				 this.timeguoji = value;
				 console.log(this.timeguoji);
				var date = new Date(value);  
				var date_value=date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + this.checkTime(date.getHours()) + ':' + this.checkTime(date.getMinutes()) + ':' + this.checkTime(date.getSeconds());
				this.timelist = date_value
				this.show = false
			    },

每隔1秒在执行

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

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

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

如何不用定宽度的span居中

<div align="center">
    <span >我居中</span>
</div>

用iframe来嵌套一个网页

<iframe name="myiframe" id="myrame" src="https://www.baidu.com" frameborder="0" align="left" width="1000" height="1000" scrolling="no">
</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对话

 <span class="text2"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1641767484&site=qq&menu=yes">联系客服</a></span>

在这里插入图片描述
因为我是自己的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+)?$/,

Establish_bug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫