一、CSS 知识点（精简）
背景图设置
background-image：引入背景图片
background-repeat: repeat-x：图片只水平平铺
background-position: left bottom：背景贴左下角
background-attachment: fixed：页面滚动，背景固定不动
body{height:2000px}：页面拉长，制造滚动效果
position: fixed 固定定位
元素固定在浏览器窗口角落，滚动页面位置不变
.back：右下固定 20px
.clock：左下固定 20px
.end：底部居中
left:50% 盒子左边跑到页面中间
transform: translate(-50%) 向左挪自身一半宽度，实现完全居中
锚点跳转
<a href="#top"> 点击直接跳到 id="top" 的顶部标签
示例
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 2000px;
background-image: url(img/bg3.jpg);
background-repeat: repeat-x;
background-position: left bottom;
background-attachment: fixed;}
.back{
position: fixed;
right: 20px;
bottom: 20px;
}
.end{
position: fixed;
left: 50%;
bottom:20px ;
transform: translate(-50%);
}
.clock{
color: black;
position: fixed;
left: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<h1 id="top">我是顶部</h1>
<div class="back">
<a href="#top"><img src="img/2.jpg"></a>
</div>
<div class="end">
<img src="img/btn4.jpg"/>
</div>
<div class="clock" id="c">
</div>
</body>
<script type="text/javascript">
window.onload=time
var b=15
function time(){
var a=document.getElementById('c')
if (b>0) {
a.innerHTML='将在'+b+'秒后a刷新页面'
b=b-1
} else{
// b=15
// a.innerHTML='将在'+b+'秒后页面刷新'
location.reload()
}
setTimeout(time,1000)
}
</script>
</html>
js解析
// 页面加载完成后，自动执行time函数
window.onload = time;
// 倒计时初始数值15
var b = 15;
// 倒计时逻辑函数
function time() {
// 获取页面上id为c的标签，用来展示文字
var a = document.getElementById('c');
if (b > 0) {
// 倒计时没结束：把当前秒数显示到页面
a.innerHTML = '将在' + b + '秒后刷新页面';
// 数字减1
b--;
} else {
// 倒计时到0，刷新整个网页，重新倒计时
location.reload();
}
}
// 每隔1000毫秒（1秒）运行一次time，实现数字每秒变化
setInterval(time, 1000);
运行流程：
- 页面加载完毕，第一次执行 time，页面显示「将在 15 秒后刷新页面」，数字变成 14
- 每过 1 秒自动执行一次，数字依次 14、13、12……1
- 数字变成 0 时，刷新页面，重新从 15 开始倒计时
浙公网安备 33010602011771号