增加删除水果表格
<!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>
function addListItem() {
let name = input.value.trim()
if (name) {
// 通过document对象的createElement方法创建新元素
let li = document.createElement('li')
// 可以用textContent或innerHTML属性来修改标签的内容
li.innerHTML = name
let a = document.createElement('a')
a.innerHTML = '×'
a.href = ''
a.addEventListener('click', removeListItem)
li.appendChild(a)
// 通过父元素的appendChild或insertBefore可以添加子元素
ul.appendChild(li)
input.value = ''
// 元素的focus和blur方法可以让元素获得或失去焦点
input.focus()
}
}
function removeListItem(evt) {
// evt.stopPropagation()
// 通过事件对象的preventDefault方法阻止事件的默认行为
evt.preventDefault()
// 通过元素获取父元素 - parentNode
// 通过元素获取子元素 - children / firstElementChild / lastElementChild
// 通过元素获取兄弟元素 - previousElementSibling / nextElementSibling
let li = evt.target.parentNode
// 通过父元素的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方法有三个参数
// 第一个参数是事件的名称，例如: click / dbclick / mouseover / mouseout
// 第二个参数是事件发生时要执行的回调函数，函数的参数是事件对象:
// ~ 传入一个已有函数的名字
// ~ 写一个匿名函数 function(evt) {}
// ~ 写一个箭头函数 (evt) => {}
// 第三个参数表示使用事件捕获还是事件冒泡,如果不写表示事件冒泡(从里向外传播事件)
// ~ 如果设置为true表示事件捕获(从外向里传播事件)
// ~ 如果希望阻止事件的传播行为可以调用事件对象的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对象 --> 封装了很多的方法
$('#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}, ${b})`
}
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>苹果<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>
重要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>数据统计表</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>
