1.用jQuery制作渐隐渐显效果的轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.container{
width: 950px;
margin: 50px auto;
text-align: center;
/* background-color: #000000; */
}
.bigPic{
height: 435px;
}
.points{
/* background-color: #A9A9A9; */
display: flex;
width: 100px;
justify-content: space-between;
margin: 0 auto;
position: relative;
top: -30px;
}
.point{
width: 8px;
height: 8px;
border-radius: 4px;
background-color: saddlebrown;
flex-direction: column;
}
.now{
background-color: burlywood;
}
</style>
</head>
<body>
<div class="container">
<div class="bigPic"><img src="img/slide-0.jpg" alt="图片"></div>
<div class="points">
<div class="point now"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
let imgPath = 'img/slide-'
let timer = null
let index = 1
let timerId = null
$('.point').on('mouseover', (evt)=>{
// console.log($(evt.target).index())
if (!$(evt.target).hasClass('now')){
// $('.bigPic img').fadeOut(500, ()=>{
// $('.bigPic img').css({'display': 'block', 'visibility': 'hidden'})
// })
$('.bigPic img').fadeOut(500)
$('.bigPic img')[0].src = imgPath + $(evt.target).index() + '.jpg'
$('.bigPic img').fadeIn(500)
$(evt.target).addClass('now').siblings().removeClass('now')
index = ($(evt.target).index() + 1) % 4
clearInterval(timerId)
}
})
function autoplay(){
// console.log($('.point').length)
$('.bigPic img').fadeOut(500)
$('.bigPic img')[0].src = imgPath + index + '.jpg'
$('.bigPic img').fadeIn(500)
$('.point').eq(index).addClass('now').siblings().removeClass('now')
index += 1
index %= 4
}
timerId = setInterval(autoplay, 2000)
$('.bigPic img').hover((evt)=>{
clearInterval(timerId)
}, (evt)=>{
timerId = setInterval(autoplay, 2000)
})
// setInterval(, 400)
</script>
</body>
</html>
2.猜数字游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.container{
width: 800px;
margin: 50px auto;
background-color: #A9A9A9;
text-align: center;
padding: 30px 10px;
font: 30px/30px "楷书","arial narrow";
}
.container > p{
margin-top: 20px;
margin-bottom: 20px;
}
.thyNumber{
border: none;
outline: none;
padding: 10px 40px;
}
.ok, .restart{
padding: 10px 20px;
border: none;
outline: none;
}
.btnStyle:hover{
background-color: #5F9EA0;
}
.result{
width: 600px;
height: 300px;
margin: 20px auto;
background-color: #5F9EA0;
overflow: auto;
}
.result > p{
font-size: 20px;
color: darkslategray;
}
</style>
</head>
<body>
<div class="container">
<p>猜数字游戏(1~100)</p>
<input type="text" placeholder="请输入数字" class="thyNumber">
<button class="ok btnStyle">确定</button>
<button class="restart" disabled="disabled">重新开始</button>
<div class="result"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
// jQuery.noConflict()
// console.log(jQuery('div'))
// console.log(jQuery($))
// console.log(jQuery(jQuery))
let readyNum = parseInt(Math.random()*100) + 1
// console.log(readyNum)
$('.thyNumber').focus((evt)=>{
// console.log(evt.target)
$(evt.target).keypress((evt) =>{
// console.log(evt.keyCode)
condition = evt.keyCode >= 48 && evt.keyCode <= 57
if (!condition){
$(evt.target).blur()
}
})
})
$('.ok').on('click', (evt)=>{
// console.log($(evt.target).prev().val()=='')
let thyNumber = $(evt.target).prev().val()
let tipText = ''
if (thyNumber){
thyNumber = parseInt(thyNumber)
if (thyNumber == readyNum){
tipText = '猜对了!'
$(evt.target).prev().blur().val('')
$(evt.target).prev().attr('readonly', 'readonly')
$(evt.target).attr('disabled', 'disabled')
// $(evt.target).hover(()=>{
// $(evt.target).css("background-color", "#5F9EA0")
// }, ()=>{
// $(evt.target).css("background-color", "#5F9EA0")
// })
$(evt.target).removeClass('btnStyle').next().addClass('btnStyle')
$('.restart').removeAttr('disabled')
}else if(thyNumber < readyNum){
tipText = '猜小了!'
$(evt.target).prev().focus().val('')
}else{
tipText = '猜大了!'
$(evt.target).prev().focus().val('')
}
}else{
tipText = '内容非空!'
$(evt.target).prev().focus().val('')
}
// console.log($('.result').innerHeight())
// console.log($('.result').height())
// console.log($('.result').css('height'))
$('.result').prepend($('<p>').text(tipText))
})
$('.restart').on('click', (evt)=>{
$(evt.target).removeClass('btnStyle').attr('disabled', 'disabled').prev().addClass('btnStyle').removeAttr('disabled')
$('.result').empty()
$('.thyNumber').removeAttr('readonly').focus()
readyNum = parseInt(Math.random()*100) + 1
// console.log(readyNum)
})
</script>
</body>
</html>
3.模仿流氓广告位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.ad{
height: 300px;
width: 300px;
line-height: 300px;
text-align: center;
position: fixed;
right: 50px;
top: 50px;
background-color: #A9A9A9;
}
.close{
position: absolute;
top: 0px;
right: 0px;
font-size: 20px;
line-height: 20px;
width: 20px;
height: 20px;
color: whitesmoke;
cursor: pointer;
}
.close:hover{
background-color: #696969;
}
</style>
</head>
<body>
<div class="ad">
广告位招租
<div class="close">×</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
let times = 0
let distance = 20
$('.close').on('click', (evt)=>{
if (times == 3){
$(evt.target).parent().hide()
}else{
$('.ad').css({'top': parseInt($('.ad').css('top'))+distance+'px', 'right': parseInt($('.ad').css('right'))+distance+'px'})
times += 1
}
})
</script>
</body>
</html>
