技术拾遗 | Serendipity

1. 返回当前日期的星期一和星期日的日期

var now = new Date();
var nowTime = now.getTime();
var day = now.getDay();
var oneDayTime = 24*60*60*1000;
//显示周一
var MondayTime = nowTime - (day-1)*oneDayTime;
//显示周日
var SundayTime = nowTime + (7-day)*oneDayTime;
//初始化日期时间
var monday = new Data(MondayTime);
var sunday = new Date(SundayTime);

function add0(m){return m<10?'0'+m:m }
function format(shijianchuo)
{
	//shijianchuo是整数，否则要parseInt转换
	var time = new Date(shijianchuo);
	var y = time.getFullYear();
	var m = time.getMonth()+1;
	var d = time.getDate();
	//var h = time.getHours();
	//var mm = time.getMinutes();
	//var s = time.getSeconds();
	return y+''+add0(m)+''+add0(d);
	//return y+''+add0(m)+''+add0(d)+''+add0(h)+':'+add0(mm)+':'+add0(s);
}
console.log(format(monday)); 
console.log(format(sunday));

2. 缩放页面不影响布局的方法

在布局时最外面套一层div，给这个div赋一个固定的长度

CSS代码

#main{
    width:xxxxpx;
    height:xxxxpx;
    MARGIN-RIGHT: auto;
	MARGIN-LEFT: auto;
}

3. 点击按钮添加新的盒子

JavaScript代码

box0.onclick = function addDiv() {
    var div = document.createElement('div');
    faetherbox.insertBefore(div,fatherbox.children[0]);    //从最顶端插入元素
    div.className = '······';
    div.innerHTML = '···';
    document.body.appendChild(div);
}

4. 创建标签追加标签

创建标签

1	var tag = document.creatElement('li');

添加标签内容

1
2
3

tag.onnerHTML = '内容';
//内容可以是标签加常量加变量：例如：list.innerHTML=' <li>'+name+‘你好！</lli>  ' 其中，name是获取到的名字的值
//清空标签内容：li.innerHTML= ' ';   此时的 li 标签仍然存在，但是他的子级都没了

追加标签

parentNode.appendChildren(tag);追加在a的父级的最底部，而且a和tag都是同一个父级
parentNode.insertBefore(tag,a);追加在a的前面，a和tag都是同一个父级

获取input的值

1 2	<input id='txt' value=''> var name = txt.value

改变input标签文本的内容

1	txt.value = 'hello';

5. 获取当前时间

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
year = year < 10 ? '0' + year : year;
month = month < 10 ? '0' + month : month;
dates = dates < 10 ? '0' + dates : dates;
time.innerHTML = year + '-' + month + '-' + dates;

6. 自定义select框的值并选中值

自定义select的选项值

<select id="select">
    <option value="1">可选值1</option>
    <option value="2">可选值2</option>
    ...
</select>

选中select框中的值

var selects = document.getElementById('select');
onchange = function() {
    var indexs = selects.selectedIndex;   //选中项的索引
    console.log(selects.options[indexs].value);
}

7. 提示框遮罩页面

html代码

<div id="popLayer"></div>
<div id="popBox">
	<div class="content">
    </div>
    <div class="close">
    	<button class="button1" οnclick="closeBox()">是</button>
        <button class="button2" οnclick="closeBox()">否</button>
    </div>
</div>

css样式

#popLayer {
    height: 100%;
    display: none;
    background-color: #212020;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
}

/* 弹出层 */
#popBox {
    display: none;
    background-color: #d9d9d9;
    z-index: 11;
    width: 300px;
    height: 100px;
    border-radius: 10px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}
.content {
    font-size: 17px;
    padding-left: 36px;
    padding-top: 15px;
    line-height: 22px;
    font-weight: 500;
}

.close .button1 {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-left: 80px;
    margin-top: 5px;
    border-radius: 4px;
    border: white;
}

.close .button2 {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-left: 80px;
    margin-top: 4px;
    border-radius: 4px;
    border: white;
}

8. axios发送post请求和get请求的具体用法

html写入代码

1
2
3

<head>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

js文件中

get请求

axios.default.baseURL = '....';
axios({
    url:'.../...',
    method:'GET',
    contentType:'application/json',
    headers:{
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    params:{
        xxx:'...',
    }
}).then(function(data){
        console.log(data.data);
        })

post请求

axios({
    url:'...',
    method:"POST",
    contentType:"application/json",
    headers:{
        'contentType':'application/x-www-form-urlencoded'
    },
    data:{
        xxx:'...',
        xxx:'...',
    }
}).then(function(result){
    console.log(result.result);
})