頁面效果：（谷歌瀏覽器有時兼容有時不兼容，只有到底部的時候會偶爾不觸發(fā)）
1.一開始艰赞，注冊和勾選框禁用方妖，倒計時隱藏
image.png
2.第一次拉動滾動條吁断，倒計時開始
image.png
3.拉倒底部時（或者倒計時結束）坞生，勾選框和注冊框激活，可選擇又兵，倒計時隱藏沛厨。
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
#info{
width: 200px;
height: 500px;
background-color: #00FFFF;
overflow:auto;
}
</style>
<script type="text/javascript">
function tick()
{
var time = new Number(document.getElementById("Button1").value);
if(time>0)
{
document.getElementById("Button1").value = time-1;
window.setTimeout("tick()",1000);
}
else
{
var btn1=document.getElementById("Button1");
var inputs = document.getElementsByTagName("input");
inputs[0].disabled = false;
inputs[1].disabled = false;
btn1.style.display = "none";
}
}
window.onload = function(){
/*
*垂直滾動條到底時表單項可用
* onscroll
* 該事件會在滾動條滾動時觸發(fā)
* */
var info = document.getElementById("info");
var inputs = document.getElementsByTagName("input");
var flag=0;
var btn1=document.getElementById("Button1");
btn1.style.display = "none";
info.onscroll = function(){
//檢查滾動條是否滾動到底了
//alert("block"+i++)
if(info.scrollTop > 1 && flag==0){
//滾動條一滾動
flag=1;
//alert("開始滑動");
var btn1=document.getElementById("Button1");
btn1.style.display = "";
document.getElementById("Button1").disabled = true;
document.getElementById("Button1").value = 10;
window.setTimeout("tick()",1000);
}
if(info.scrollHeight > info.clientHeight && info.scrollTop + info.clientHeight >= info.scrollHeight){
//滾動條到底表單項可用
var btn1=document.getElementById("Button1");
inputs[0].disabled = false;
inputs[1].disabled = false;
btn1.style.display = "none";
}
}
}
</script>
<title></title>
</head>
<body>
<h1>歡迎新用戶注冊</h1>
<p id="info">
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊
親愛的用戶請仔細閱讀一下協(xié)議如果不仔細你將不能成功注冊</p>
<input type="checkbox" name="" id="" value="" disabled="disabled"/>我已仔細閱讀協(xié)議,一定遵守
<input type="submit" value="注冊" disabled="disabled"/><!-- 如果為表單添加disabled="disabled則表單項將變成不可用的狀態(tài)-->
<INPUT TYPE="button" NAME="Button1" id="Button1">
</body>
</html>
