HTML5 小功能_blockquote-footer-优快云博客

本文介绍了如何使用CSS的fixed属性实现底部元素固定效果，展示了如何调整body背景图片使其自适应，以及通过JavaScript控制网页滚动条的显示与隐藏。此外，还提供了一个利用setTimeout函数实现倒计时后自动关闭页面的示例。

<footer>永久置底

<footer class="blockquote-footer" style="position: fixed;bottom: 0;">
This is a footer.
</footer>
position: fixed 这个属性可以让footer跟着滚动条一起走，如果去掉则会永远在最下面

Body背景图片自适应

<body
	style="width: 100%; height: 100%; background: url('../img/background-exregister.png'); background-size: 100%;"></body>

禁用启用滚动条，更详细请参考：https://blog.youkuaiyun.com/wide288/article/details/9496843

<script type="text/javascript">
 //禁止滚动条
 $(document.body).css({
   "overflow-x":"hidden",
   "overflow-y":"hidden"
 });
 
 //启用滚动条
 $(document.body).css({
   "overflow-x":"auto",
   "overflow-y":"auto"
 });
  
</script>

关闭当前页面

function close_window(){
	if (browserName == "Netscape") { //这里验证是否为google chrome，因为chrome发现是最后一个页面会报Scripts may close only the windows that were opened by it.的错误
        window.location.href = "about:blank"; 
        window.close();
    } else if (browserName == "Microsoft Internet Explorer") {//IE就直接关闭就好了
        window.opener = null;
        window.close();
    } 
}

倒数读秒关闭的小例子，例子用了setTimeout函数的特性进行递归调用，每次延时一秒执行本方法，就构成了一个循环。

页面：
<span id="alert_time"></span> 
调用：
<script type="text/javascript">
	var time=5;
	show("#alert_time",time);
</script>

/**
 * 延时一秒执行
 * @param ele  控件，可以传入空间的id或者class选择器
 * @param time  循环次数
 * @returns
 */
function show(ele,time){
	time--;
	$(ele).text(time);//这里是给ele控件赋值，可以作为读秒显示在页面上
	if(time==0){
		close_window();//这里是读秒结束以后做的操作，我这里和上面的关闭方法一起构建了一个倒数关闭窗口的小功能
	}else{
		setTimeout(function(){
			show(ele,time);
		}, 1000);
	}
}