轮播广告
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#advImage1{
width: 800px;
height: 400px;
text-align: center;
}
</style>
</head>
<body>
<div id="advImage1">
<img id="advImage" src="images/slide-1.jpg">
</div>
<script>
// const advImage = document.getElementById('advImage')
var tupian = ['images/slide-1.jpg','images/slide-2.jpg','images/slide-3.jpg','images/slide-4.jpg']
var num = 0
// advImage.src = tupian[num]
function lunhuan(){
advImage.src = tupian[num]
num +=1
if (num > 3){
num = 0
}
}
let time1 = setInterval(lunhuan, 1000)
advImage.addEventListener('mouseover',function(){clearInterval(time1)})
advImage.addEventListener('mouseout', function() {time1= setInterval(lunhuan, 1000)})
</script>
</body>
</html>
轮播广告
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播广告</title>
<style>
#adv {
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="adv">
<img src="images/slide-1.jpg" width="600" alt="">
</div id="adv">
<script>
// document.getElementById('标识') ---> HTMLElement [!]
// document.getElementsByTagName('标签名') ---> NodeList
// document.getElementsByClassName('类名') ---> NodeList
// document.querySelector('样式表选择器') ---> HTMLElement [!]
// document.querySelectorAll('样式表选择器') ---> NodeList [!]
// firstChild / lastChild / children --- 获取子节点
// parentNode --- 获取父节点
// previousSibling / nextSibling --- 获取兄弟
const img = document.querySelector('#adv>img')
const imageNames = ['slide-1', 'slide-2', 'slide-3', 'slide-4']
var imageIndex = 0
function switchImage() {
imageIndex += 1
imageIndex %= imageNames.length
img.src = 'images/' + imageNames[imageIndex] + '.jpg'
}
var timerId = setInterval(switchImage, 2000)
img.addEventListener('mouseover', () => clearInterval(timerId))
img.addEventListener('mouseout', () => {
timerId = setInterval(switchImage, 2000)
})
</script>
</body>
</html>
jQuery增加删除水果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#fruits {
width: 120px;
margin: 20px 20px;
}
#fruits>li {
list-style-type: none;
height: 40px;
color: white;
background-color: #009966;
line-height: 40px;
text-align: center;
margin-top: 2px;
}
#fruits>li>a {
float: right;
color: white;
text-decoration: none;
}
#fruits~input {
border: none;
outline: none;
text-align: center;
margin: 20px 15px;
}
input[type=text] {
border-bottom: 1px solid gray !important;
}
#ok {
width: 80px;
height: 30px;
background-color: #CC3333;
color: white;
}
</style>
</head>
<body>
<div id="container">
<ul id="fruits">
<li>苹果<a href="">×</a></li>
<li>香蕉<a href="">×</a></li>
<li>火龙果<a href="">×</a></li>
<li>西瓜<a href="">×</a></li>
</ul>
<input type="text" name="fruit">
<input id="ok" type="button" value="确定">
</div>
<script src="js/jquery.min.js"></script>
<script>
function removeListItem(evt) {
evt.preventDefault()
// $函数的参数是一个原生的JavaScript对象,返回与原生JavaScript对象对应的jQuery对象
$(evt.target).parent().remove()
}
// $函数的四种用法:
// $函数的参数是一个匿名函数或箭头函数,传入的函数是页面加载完成后要执行的回调函数
$(() => {
// $函数的参数是一个样式表选择器字符串,获取页面元素得到一个jQuery对象(伪数组 - 数组中装的是原生JavaScript对象)
$('#fruits>li>a').on('click', removeListItem)
$('#ok').on('click', (evt) => {
let input = $('#ok').prev();
let name = input.val().trim()
if (name) {
$('#fruits').append(
// $函数的参数是一个标签字符串,创建一个新的元素并获得对应的jQuery对象
$('<li>').text(name).append(
$('<a href="">').html('×').on('click', removeListItem)
)
)
}
input.val('').get(0).focus()
})
})
</script>
</body>
</html>
淡出表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#data {
border-collapse: collapse;
}
#data td, #data th {
width: 120px;
height: 40px;
text-align: center;
border: 1px solid black;
}
#buttons {
margin: 10px 0;
}
#adv {
width: 200px;
height: 200px;
position: absolute;
top: 10px;
right: 10px;
background-color: blue;
}
</style>
</head>
<body>
<table id="data">
<caption>数据统计表</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>身高</th>
<th>体重</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
</tbody>
</table>
<div id="buttons">
<button id="pretty">隔行换色</button>
<button id="clear">清除数据</button>
<button id="remove">删除一行</button>
<button id="hide">表格淡出</button>
</div>
<div id="adv"></div>
<script>
const pretty = document.querySelector('#pretty')
pretty.addEventListener('click', (evt) => {
let rows = document.querySelectorAll('#data>tbody>tr')
rows.forEach((row, i) => {
let color = (i % 2 == 0 ? 'lightgray' : 'lightseagreen')
row.style.backgroundColor = color
})
})
const clear = document.querySelector('#clear')
clear.addEventListener('click', (evt) => {
let cols = document.querySelectorAll('#data>tbody>tr>td')
cols.forEach((col) => {
col.innerHTML = ''
})
})
const remove = document.querySelector('#remove')
remove.addEventListener('click', (evt) => {
let tbody = document.querySelector('#data>tbody')
let lastRow = tbody.lastElementChild
if (lastRow) {
tbody.removeChild(lastRow)
}
})
var opacity = 100
var delta = -5
const table = document.querySelector('#data')
const hide = document.querySelector('#hide')
hide.addEventListener('click', (evt) => {
let button = evt.target
setTimeout(function() {
opacity += delta
table.style.opacity = opacity / 100
if (opacity == 0 || opacity == 100) {
delta = -delta
button.textContent = opacity == 0? '表格淡入' : '表格淡出'
} else {
setTimeout(arguments.callee, 50)
}
}, 50)
})
let adv = document.querySelector('#adv')
adv.addEventListener('click', (evt) => {
// 读取样式
let currentStyle = document.defaultView.getComputedStyle(adv)
let top = parseInt(currentStyle.top) + 5
// 修改样式
adv.style.top = top + 'px'
let right = parseInt(currentStyle.right) + 5
adv.style.right = right + 'px'
})
</script>
</body>
</html>
jQuery马赛克
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container {
width: 800px;
height: 400px;
margin: 10px auto;
border: 1px solid black;
overflow: hidden;
}
#buttons {
width: 800px;
margin: 10px auto;
text-align: center;
}
#add, #fla {
border: none;
outline: none;
width: 80px;
height: 30px;
background-color: red;
color: white;
font-size: 16px;
cursor: pointer;
}
.small {
width: 80px;
height: 80px;
float: left;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<button id="add">添加</button>
<button id="fla">闪烁</button>
</div>
<script src="js/hello.js"></script>
<script src="js/jquery.min.js"></script>
<script>
$(() => {
$('#add').on('click', (evt) => {
$('#container').prepend(
$('<div class="small">')
.css('background-color', randomColor())
)
})
$('#fla').on('click', (evt) => {
setInterval(() => {
$('#container>div').each((index, div) => {
$(div).css('background-color', randomColor())
})
}, 200)
})
})
</script>
</body>
</html>
