增加刪除水果表格
<!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>蘋(píng)果<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>
function addListItem() {
let name = input.value.trim()
if (name) {
// 通過(guò)document對(duì)象的createElement方法創(chuàng)建新元素
let li = document.createElement('li')
// 可以用textContent或innerHTML屬性來(lái)修改標(biāo)簽的內(nèi)容
li.innerHTML = name
let a = document.createElement('a')
a.innerHTML = '×'
a.href = ''
a.addEventListener('click', removeListItem)
li.appendChild(a)
// 通過(guò)父元素的appendChild或insertBefore可以添加子元素
ul.appendChild(li)
input.value = ''
// 元素的focus和blur方法可以讓元素獲得或失去焦點(diǎn)
input.focus()
}
}
function removeListItem(evt) {
// evt.stopPropagation()
// 通過(guò)事件對(duì)象的preventDefault方法阻止事件的默認(rèn)行為
evt.preventDefault()
// 通過(guò)元素獲取父元素 - parentNode
// 通過(guò)元素獲取子元素 - children / firstElementChild / lastElementChild
// 通過(guò)元素獲取兄弟元素 - previousElementSibling / nextElementSibling
let li = evt.target.parentNode
// 通過(guò)父元素的removeChild方法可以刪除指定的子元素
ul.removeChild(li)
}
const ul = document.querySelector('#fruits')
const input = ul.nextElementSibling
input.addEventListener('keypress', (evt) => {
let code = evt.keyCode || evt.which
if (code == 13) {
addListItem()
}
})
const ok = input.nextElementSibling
ok.addEventListener('click', addListItem)
let anchors = document.querySelectorAll('#fruits>li>a')
for (let i = 0; i < anchors.length; i += 1) {
// addEventListener方法有三個(gè)參數(shù)
// 第一個(gè)參數(shù)是事件的名稱，例如: click / dbclick / mouseover / mouseout
// 第二個(gè)參數(shù)是事件發(fā)生時(shí)要執(zhí)行的回調(diào)函數(shù)，函數(shù)的參數(shù)是事件對(duì)象:
// ~ 傳入一個(gè)已有函數(shù)的名字
// ~ 寫(xiě)一個(gè)匿名函數(shù) function(evt) {}
// ~ 寫(xiě)一個(gè)箭頭函數(shù) (evt) => {}
// 第三個(gè)參數(shù)表示使用事件捕獲還是事件冒泡,如果不寫(xiě)表示事件冒泡(從里向外傳播事件)
// ~ 如果設(shè)置為true表示事件捕獲(從外向里傳播事件)
// ~ 如果希望阻止事件的傳播行為可以調(diào)用事件對(duì)象的stopPropagation方法
anchors[i].addEventListener('click', removeListItem)
}
</script>
</body>
</html>
jQuery
<!-- 引入jQuery -->
<script src="js/jquery.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
<script>
// $('選擇器') --> jQuery對(duì)象 --> 封裝了很多的方法
$('#pretty').on('click', () => {
$('#data>tbody>tr:odd').css('background-color', 'lightgray')
$('#data>tbody>tr:even').css('background-color', 'lightgreen')
})
$('#clear').on('click', () => {
$('#data>tbody>tr>td').empty()
})
$('#remove').on('click', () => {
$('#data>tbody>tr:last-child').remove()
})
$('#hide').on('click', () => {
let title = $('#hide').text()
if (title == '表格淡出') {
$('#data').fadeOut(1000, () => {
$('#hide').text('表格淡入')
})
} else {
$('#data').fadeIn(2000, () => {
$('#hide').text('表格淡出')
})
}
})
</script>
閃爍的馬賽克
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
margin:10px auto;
text-align: center;
}
#box{
width: 800px;
height: 400px;
border: 2px #000000 solid;
overflow: hidden;
}
/* .blockage{
width: 80px;
height: 80px;
float: left;
margin: 0;
} */
</style>
</head>
<body>
<div id="box">
</div>
<div id="">
<button id="addBox" type="button">添加</button>
<button type="button">閃爍</button>
</div>
<script>
function randomColor(){
let r = parseInt(Math.random()*256)
let g = parseInt(Math.random()*256)
let b = parseInt(Math.random()*256)
return `rgb(${r}, ${g}, $)`
}
const addBoxs = document.querySelectorAll('div>button')
const box = document.getElementById('box')
var times, listBox = [], num = 0, falg = false
addBoxs[0].addEventListener('click', () => {
let div = document.createElement('div')
listBox[num]= div
num += 1
// div.class='blockage'
div.style.width='80px'
div.style.height='80px'
div.style.margin='0'
div.style.float='left'
div.style.backgroundColor=randomColor()
box.appendChild(div)
})
addBoxs[1].addEventListener('click',() => {
falg = !falg
if(falg){
addBoxs[1].textContent = '暫停'
times = setInterval(flicker,100)
}else{
addBoxs[1].textContent = '閃爍'
clearInterval(times)
}
})
function flicker() {
for(let i = 0;i < listBox.length; i += 1){
listBox[i].style.backgroundColor=randomColor()
}
}
</script>
<!-- <script src="js/jquery.min.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
alert($)
</script>
</body>
</html>
重要
<!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>蘋(píng)果<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()
// $函數(shù)的參數(shù)是一個(gè)原生的JavaScript對(duì)象,返回與原生JavaScript對(duì)象對(duì)應(yīng)的jQuery對(duì)象
$(evt.target).parent().remove()
}
// $函數(shù)的四種用法:
// $函數(shù)的參數(shù)是一個(gè)匿名函數(shù)或箭頭函數(shù),傳入的函數(shù)是頁(yè)面加載完成后要執(zhí)行的回調(diào)函數(shù)
$(() => {
// $函數(shù)的參數(shù)是一個(gè)樣式表選擇器字符串,獲取頁(yè)面元素得到一個(gè)jQuery對(duì)象(偽數(shù)組 - 數(shù)組中裝的是原生JavaScript對(duì)象)
$('#fruits>li>a').on('click', removeListItem)
$('#ok').on('click', (evt) => {
let input = $('#ok').prev();
let name = input.val().trim()
if (name) {
$('#fruits').append(
// $函數(shù)的參數(shù)是一個(gè)標(biāo)簽字符串,創(chuàng)建一個(gè)新的元素并獲得對(duì)應(yīng)的jQuery對(duì)象
$('<li>').text(name).append(
$('<a href="">').html('×').on('click', removeListItem)
)
)
}
input.val('').get(0).focus()
})
})
</script>
</body>
</html>
重要2
<!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>數(shù)據(jù)統(tǒng)計(jì)表</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">清除數(shù)據(jù)</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>
