javascript 随着时间隐藏或者显示按钮
本学期助教，继续教小朋友使用scilab.吸取去年经验，我改进了我的教学主页，比如：http://www.di.ens.fr/~ychen/scilab/tp1.html...
本学期助教，继续教小朋友使用scilab. 吸取去年经验，我改进了我的教学主页，比如：http://www.di.ens.fr/~ychen/scilab/tp1.html上面有若干习题，每个习题下面都有"看答案"的按钮，一点这个按钮，答案就会显示若干秒，然后收回。这个按钮是用css + jquery实现的。其实我没有精力学jquery，就是在网上搜索拷贝下来，稍微修改下罢了。代码如下：$(document).ready(function(){
$(".ans .hide").click(function(){
$(this).parents(".ans").find($("p")).slideDown("slow").delay(10000).slideUp("slow");
});
}); 然后正文部分是：<div class="ans"><button class="hide">...</button><p>....</p></div> 现在我希望改进功能，不希望学生们那么轻易就能看到答案。因为上课是13:45开始的，所以我希望答案只在每天的某个时间段显示。比如第一题答案只在14:00以后显示。第二题答案在14:20后显示，等等。如果时间未到，按钮应该是隐藏的。 有没有办法让每个按钮都设定自己的“露脸”时间呢?先多谢朋友帮助：由于本人是JS盲，所以请不要概说大意，请贴代码。。最好是从$(document).ready(function(){ 开始往后的所有代码，还有正文部分怎么用。。。谢谢！ 展开
$(".ans .hide").click(function(){
$(this).parents(".ans").find($("p")).slideDown("slow").delay(10000).slideUp("slow");
});
}); 然后正文部分是：<div class="ans"><button class="hide">...</button><p>....</p></div> 现在我希望改进功能，不希望学生们那么轻易就能看到答案。因为上课是13:45开始的，所以我希望答案只在每天的某个时间段显示。比如第一题答案只在14:00以后显示。第二题答案在14:20后显示，等等。如果时间未到，按钮应该是隐藏的。 有没有办法让每个按钮都设定自己的“露脸”时间呢?先多谢朋友帮助：由于本人是JS盲，所以请不要概说大意，请贴代码。。最好是从$(document).ready(function(){ 开始往后的所有代码，还有正文部分怎么用。。。谢谢！ 展开
2个回答
展开全部
//自己敲的，非复制粘贴，在IE浏览器测试。如果可行还请及时结贴！
//下面是按钮按指定时间依次显示，具体你结合自己的功能改改
<html>
<head>
<title>Javascript测试</title>
<style type="text/css">
.hide{
display:"none";
}
</style>
<script src="jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
//参数1，2：第一个按钮显示的小时数和分钟数
//参数3，下个按钮显示间隔分钟数
function checkShow(firstShowH, firstShowM, stepMinute){
var objBtns = $('.hide');//jQuery对象，所有按钮的集合
objBtns.each(function(){
var d = new Date();
var index = objBtns.index(this);//当前按钮索引
var showMinute = firstShowH*60 + firstShowM + stepMinute*index;//当前按钮显示时间，转换为当天的分钟数
if(d.getHours()*60 + d.getMinutes() >= showMinute){
$(this).css('display', 'block');
if(index == objBtns.length - 1)
clearInterval();
}
});
}
$().ready(function(){
//第一个按钮1：13分显示（24小时制），每隔一分钟下个按钮显示
setInterval("checkShow(1, 13, 1)", 1000);
});
</script>
</head>
<body>
<div class="ans"><button class="hide">btn1</button><p>p1</p></div>
<div class="ans"><button class="hide">btn2</button><p>p2</p></div>
<div class="ans"><button class="hide">btn3</button><p>p3</p></div>
</body>
</html>
//下面是按钮按指定时间依次显示，具体你结合自己的功能改改
<html>
<head>
<title>Javascript测试</title>
<style type="text/css">
.hide{
display:"none";
}
</style>
<script src="jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
//参数1，2：第一个按钮显示的小时数和分钟数
//参数3，下个按钮显示间隔分钟数
function checkShow(firstShowH, firstShowM, stepMinute){
var objBtns = $('.hide');//jQuery对象，所有按钮的集合
objBtns.each(function(){
var d = new Date();
var index = objBtns.index(this);//当前按钮索引
var showMinute = firstShowH*60 + firstShowM + stepMinute*index;//当前按钮显示时间，转换为当天的分钟数
if(d.getHours()*60 + d.getMinutes() >= showMinute){
$(this).css('display', 'block');
if(index == objBtns.length - 1)
clearInterval();
}
});
}
$().ready(function(){
//第一个按钮1：13分显示（24小时制），每隔一分钟下个按钮显示
setInterval("checkShow(1, 13, 1)", 1000);
});
</script>
</head>
<body>
<div class="ans"><button class="hide">btn1</button><p>p1</p></div>
<div class="ans"><button class="hide">btn2</button><p>p2</p></div>
<div class="ans"><button class="hide">btn3</button><p>p3</p></div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
只要将下面代码加到
$(document).ready(function(){
//放在最后最好
});
里面即可.
////////////////////////////////////////////
$(".ans .hide").each(function(){
$(this).css('visibility', 'hidden');
});
setInterval(function() {
var date = new Date();
var time = null;
var showHour = 0;
var showMinutes = 0;
var showSeconds = 0;
$(".ans .hide").each(function(){
time = $(this).attr('show');
if (!time) return;
tiem = time.split(':');
showHour = time[0] | 0;
showMinutes = time[1] | 0;
showSeconds = time[2] | 0;
if (date.getHours() >= showHour
&& date.getMinutes() >= showMinutes
&& date.getSeconds() >= showSeconds)
{
$(this).css('visibility', 'visible');
}
});
}, 1000);
////////////////////////////////////////////////
正文部分这样写
<div class="ans"><button class="hide" show="hh:mm:ss">...</button><p>....</p></div>
每一个button里加一个show属性,引号里写上时间,格式是 小时:分钟:秒
$(document).ready(function(){
//放在最后最好
});
里面即可.
////////////////////////////////////////////
$(".ans .hide").each(function(){
$(this).css('visibility', 'hidden');
});
setInterval(function() {
var date = new Date();
var time = null;
var showHour = 0;
var showMinutes = 0;
var showSeconds = 0;
$(".ans .hide").each(function(){
time = $(this).attr('show');
if (!time) return;
tiem = time.split(':');
showHour = time[0] | 0;
showMinutes = time[1] | 0;
showSeconds = time[2] | 0;
if (date.getHours() >= showHour
&& date.getMinutes() >= showMinutes
&& date.getSeconds() >= showSeconds)
{
$(this).css('visibility', 'visible');
}
});
}, 1000);
////////////////////////////////////////////////
正文部分这样写
<div class="ans"><button class="hide" show="hh:mm:ss">...</button><p>....</p></div>
每一个button里加一个show属性,引号里写上时间,格式是 小时:分钟:秒
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
