用jQuery 实现水果动态删除功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js">
</script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box1{
margin-left: 100px;
margin-top: 100px;
}
#box2{
margin-left: 100px;
}
.fruit{
width: 260px;
height: 60px;
background-color: rgb(80,141,141);
margin-bottom: 5px;
text-align: center;
line-height: 60px;
position: relative;
}
#box2 #text{
height: 70px;
text-align: center;
font-size: 20px;
width: 260px;
border: 0;
border-bottom: 2px solid rgb(150,150,150);
}
#box2 #text:focus{
outline: 0;
}
#box2 #button{
height: 50px;
border: 0;
background-color: goldenrod;
color: white;
width: 80px;
font-size: 18px;
}
.del{
cursor: pointer;
position: absolute;
right: 3px;
line-height: 60px;
font-size: 18px;
}
.name{
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<div id="box1">
<div class="fruit">
<font class="name">苹果</font>
<font class="del">×</font>
</div>
<div class="fruit">
<font class="name">香蕉</font>
<font class="del">×</font>
</div>
<div class="fruit">
<font class="name">西瓜</font>
<font class="del">×</font>
</div>
<div class="fruit">
<font class="name">哈密瓜</font>
<font class="del">×</font>
</div>
</div>
<div id="box2">
<input type="text" name="" id="text" value="" placeholder="请输入水果名"/>
<input type="button" name="" id="button" value="确定"/>
</div>
<script type="text/javascript">
//添加
$("#button").on('click',function(){
//获取输入内容
message = $("#text").val()
if (message == ""){
alert("请输入水果名")
return
}
$("#text").val("")
//创建节点
divNode = $('<div class="fruit" ></div>')
fontNode = $('<font class="name"></font>')
fontNode.text(message)
delNode = $('<font class="del">×</font>')
divNode.append(fontNode)
divNode.append(delNode)
$("#box1").prepend(divNode)
console.log(divNode)
});
//删除
$("#box1").on('click','.del',function(){
this.parentElement.remove()
});
</script>
</body>
</html>
实现图片动态循环变动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#bigImg{
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="bigBox">
<img id="bigImg"/>
</div>
<script type="text/javascript">
//0.获取节点
var smallBoxNode = document.getElementById('smallBox');
var bigBoxNode = document.getElementById('bigBox');
var bigImgNode = document.getElementById('bigImg');
//1.获取数据源
var imgArray = [
{
name:'图一',
small_url:'img/thumb-1.jpg',
big_url:'img/picture-1.jpg'
},
{
name:'图二',
small_url:'img/thumb-2.jpg',
big_url:'img/picture-2.jpg'
},
{
name:'图三',
small_url:'img/thumb-3.jpg',
big_url:'img/picture-3.jpg'
}
];
//2.将数据展示在浏览器相应的位置
var currentSmallNode = null
for(var x in imgArray){
//根据小图创建节点
var imgObj = imgArray[x];
var smallImgNode = document.createElement('img');
if(x == 0){
smallImgNode.style.borderBottom = '1px solid red';
currentSmallNode = smallImgNode;
currentSmallNode.index = 0;
}
smallImgNode.src = imgObj.small_url;
//在节点对象中保存和节点相关的信息
smallImgNode.info1 = imgObj;
//添加节点
smallBoxNode.appendChild(smallImgNode);
//绑定事件
smallImgNode.onclick = function(){
// console.log(this.info1)
bigImgNode.src = this.info1.big_url;
//将之前选中的下边框去掉
currentSmallNode.style.border = 'none';
//选中谁就给谁加下边框
this.style.borderBottom = '1px solid red';
//更新当前节点的值
currentSmallNode = this;
}
}
//3.大图默认显示
bigImgNode.src = imgArray[0].big_url;
// var index = 0;
//4.定时事件
var inter1 = window.setInterval(function(){
var index = currentSmallNode.index;
var SmallImgNodeArray = smallBoxNode.children
index ++;
if(index == SmallImgNodeArray.length){
index = 0;
}
var smallImgNode = SmallImgNodeArray[index];
bigImgNode.src = smallImgNode.info1.big_url;
currentSmallNode.style.border = 'none';
smallImgNode.style.borderBottom = '1px solid red';
currentSmallNode = smallImgNode;
currentSmallNode.index = index;
}, 2000);
</script>
</body>
</html>
实现闪烁小盒子功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box1{
position: absolute;
left: 50%;
height: 300px;
width: 600px;
border: 1px solid rgb(50,50,50);
margin-left: -300px;
top: 100px;
}
#box2{
position: absolute;
text-align: center;
width: 100%;
background-color: white;
height: 600px;
top: 402px;
}
.but{
border: 0;
background-color:cornflowerblue;
color: white;
width: 60px;
font-size: 20px;
}
.small{
float: left;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2">
<button class="but" onclick="addAction()">添加</button>
<button class="but" id="blink" onclick="blinkAction()">闪烁</button>
</div>
<script type="text/javascript">
nameBox = "small"
//产生随机颜色
function randomColor(a=0.5){
var num1 = parseInt(Math.random()*255)
var num2 = parseInt(Math.random()*255)
var num3 = parseInt(Math.random()*255)
return "rgba(" + num1 + "," + num2 + "," + num3 +"," + a + ")"
}
//添加
function addAction(){
//创建节点
var smallNode = document.createElement("div")
smallNode.style = "width:60px;height:60px"
smallNode.style.backgroundColor = randomColor(0.8)
smallNode.className = nameBox
//添加节点
boxNode = document.getElementById("box1")
boxNode.appendChild(smallNode)
}
//闪烁
blinkNode = document.getElementById("blink")
blinkNode.innerText == "暂停"
function blinkAction(){
if (blinkNode.innerText == "闪烁"){
blinkNode.innerText = "暂停"
}else{
blinkNode.innerText = "闪烁"
}
var smallNodes = document.getElementsByClassName(nameBox)
time1 = setInterval (function(){
if(blinkNode.innerText == "暂停"){
clearInterval(time1)
}
if(blinkNode.innerText == "闪烁"){
for (x=0;x<smallNodes.length;x++){
var smallNode = smallNodes[x]
smallNode.style.backgroundColor = randomColor(0.8)
}
}
} ,1000)
}
</script>
</body>
</html>
