HtmlCssJs
重置
0
.chongzhi {
background-color:red;
width:50px;
color:#fff;
height:30px;
border-radius:10px;
border:none;
margin-bottom:5px;
}
.demo {
width:50px;
margin:0 auto;
text-align:center;
height:100px;
}
.time {
width:100%;
border-radius:50%;
height:50px;
text-align:center;
border:1px red solid;
color:red;
}
.div {
width:100px;
height:100px;
background-color:red;
margin:0 auto;
text-align:center;
line-height:100px;
color:#fff;
border-radius:50%;
}
//请在本段代码请引用jq,否则代码无效!
$('.div').click(function() {
var time = $('.time').val()
if (time > 0) {
$('.time').attr("disabled", true)
$('.chongzhi').attr("disabled", true)
var shu = parseInt($(this).text()) + 1
$(this).html(shu)
var height = jQuery(window).height() - 100 //获取当前浏览器高度,减去容器高度
var widht = $(window).width() - 100 //获取当前浏览器宽度,减去容器宽度
var le = parseInt(Math.random() * (widht - 0 + 1) + 0); //获取随机数
var to = parseInt(Math.random() * (height - 100 + 1) + 100); //获取随机数,高度减去功能区高度
$(this).css({
'position': 'absolute',
'left': le,
'top': to
})
var time = parseInt(time);
if (shu <= 1) {
times(time, time)
}
}
if (time == "") {
alert("请填入时间")
}
})
function times(time, timeq) { //倒计时
setTimeout(function() {
time = time - 1
$('.time').val(time)
$('.chongzhi').click(function() {
$('.div').html('0')
$('.div').css({
'position': '',
'left': '',
'top': ''
})
$('.time').val(timeq)
})
if (time == 0) {
var ci = parseInt($('.div').text())
alert('您在' + timeq + '秒内点击了' + ci + '次')
$('.time').attr("disabled", false)
$('.chongzhi').attr("disabled", false)
return false
}
text(time, timeq) //执行text事件
}, 1000);
}
function text(time, timeq) {
times(time, timeq) //执行time事件
}
↑上面代码改变,会自动显示代码结果
jQuery调用版本:1.11.3