1. 当页面加载时间调用
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 id="show" style="text-align: center;"></h2>
<script>
//当页面加载时间调用
window.onload = function () {
//计时器 1000秒
setInterval(function () {
var date = new Date();
var year = date.getFullYear(); //获取当前年份
var mon = date.getMonth() + 1; //获取当前月份
var da = date.getDate(); //获取当前日
var day = date.getDay(); //获取当前星期几
var h = date.getHours(); //获取小时
var m = date.getMinutes(); //获取分钟
var s = date.getSeconds(); //获取秒
var d = document.getElementById('show');
//判断当数字小于等于9时 显示 01 02 ----- 08 09
if (mon >= 1 && mon <= 9) {
mon = "0" + mon;
}
if (da >= 0 && da <= 9) {
da = "0" + da;
}
if (h >= 0 && h <= 9) {
h = "0" + h;
}
if (m >= 0 && m <= 9) {
m = "0" + m;
}
if (s >= 0 && s <= 9) {
s = "0" + s;
}
d.innerHTML = year + '-' + mon + '-' + da + ' ' + h + ':' + m + ':' + s;
}, 1000)
}
</script>
</body>
</html>
效果如下
2. 滚动条优化
代码如下
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css滚动条样式</title>
<style type="text/css">
.box {
width: 600px;
height: 400px;
margin: 100px auto;
border: 1px solid #000;
border-right: 0;
}
.main {
overflow-x: hidden;
overflow-y: auto;
color: #000;
font-size: 16px;
height: 100%;
}
.main p {
height: 300px;
}
/*-------滚动条整体样式----*/
.main::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/*滚动条里面小方块样式*/
.main::-webkit-scrollbar-thumb {
border-radius: 100px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #4788fb;
}
/*滚动条里面轨道样式*/
.main::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="box">
<div class="main">
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
</div>
</div>
</body>
</html>
效果如下
3. 两个数组转化为map对象
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/* 将两个数组转化为map对象 */
var arr1 = [90, 85, 75, 80, 95, 100];
var arr2 = ["张三", "李四", "王五", "马六", "小妞", "小黑"];
//map类型转换
function transformObject(keyArr, valueArr) {
var obj = [];
var i = 0;
keyArr.map((v, i) => {
obj.push({
"value": valueArr[i],
"name": keyArr[i]
});
// obj[keyArr[i]] = valueArr[i];
})
return obj;
}
//转换为map
var map = transformObject(arr2, arr1);
console.log('map :>> ', map);
</script>
</body>
</html>
效果如下
4. 好看的按钮特效
效果如下
代码下载
链接：https://pan.baidu.com/s/1Pn_yAhXrTXJhmN5uWj5S-g
提取码：c4x3
5. particles.js背景特效
效果如下
代码下载
链接：https://pan.baidu.com/s/1Mw725r4KSbkiFf-1vffqWg
提取码：py6o
