JS小案例锦集
1，图片轮播，实现点击按钮按顺序和循环切换
效果图：
实现代码：
#outbox {
margin: 20px auto;
width: 500px;
height: 380px;
border: 1px solid black;
}
#box img {
width: 500px;
height: 325px;
}
.top {
text-align: center;
}
#box {
width: 500px;
height: 325px;
position: relative;
}
#box #content {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
top: 0;
height: 20px;
width: 500px;
margin: 0;
text-align: center;
color: white;
}
#left {
display: block;
width: 40px;
height: 50px;
border: 1px solid black;
font-size: 30px;
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 135px;
left: 0;
cursor: pointer;
}
#right {
display: block;
width: 40px;
height: 50px;
border: 1px solid black;
font-size: 30px;
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 135px;
right: 0;
cursor: pointer;
}结构层次：
1/4
<
>
2、输入框输入数字，在页面显示v字形
分析：对奇偶数的处理
效果图：
代码实现：
#box{
position: relative;
}
span {
display: block;
width: 50px;
height: 50px;
background-color: red;
text-align: center;
line-height: 50px;
color: white;
font-size: 30px;
position: absolute;
}
var oInp = document.getElementById("inp"),
btn = document.getElementById("btn"),
box = document.getElementById("box");
btn.onclick = function() {
var str = "";
var num = Number(oInp.value);
// console.log(num);
for(var i=0;i'+(i+1)+'';
}else{
str += ''+(i+1)+'';
}
}
box.innerHTML = str;
}; 3、图片电子时间
效果图：
function change() {
var imgList = document.getElementsByClassName("img");
var date = new Date();
var hour = date.getHours()+'';
var min = date.getMinutes()+'';
var sec = date.getSeconds()+'';
var str = addZero(hour) + addZero(min) + addZero(sec);
console.log(str);
for (var i = 0; i < str.length; i++) {
imgList[i].src = "img/" + str[i] + ".JPG";
}
// 判断时间小于10，添加0补位
function addZero(time) {
return time < 10 ? "0" + time : time;
}
}
setInterval(change,1000)
change();4、表单数据操作
效果图
代码实现：
姓名
年龄
性别
城市
var table = document.getElementsByTagName("table")[0];
var inputs = document.getElementsByTagName("input");
var ary = [
{ name: "张三", age: 15, sex: 0, city: "北京" },
{ name: "莉莉丝", age: 25, sex: 0, city: "衡州" },
{ name: "王晓婉", age: 20, sex: 1, city: "北京" },
{ name: "郝建", age: 17, sex: 1, city: "成都" },
{ name: "周小华", age: 30, sex: 0, city: "南京" }
];
var str = "";
var flag = true;
var ary2 = nameSort();
var ary3 = ageSort();
//生成表格函数
function create(array) {
str = "姓名 年龄 性别 城市 ";
for (var key in ary[i]) {
if (key == "age") {
if (ary[i].age < 18) {
str += '' + ary[i][key] + " ";
} else {
str += "" + ary[i][key] + " ";
}
} else {
str += "" + ary[i][key] + " ";
}
}
str += " ";
}
table.innerHTML = str;
}
create(ary);//预渲染一次
//姓名排序封装函数
function nameSort() {
if (flag == true) {
var ary2 = ary.sort(function(a, b) {
return a.name.localeCompare(b.name, "zh");
});
flag = false;
} else {
var ary2 = ary.sort(function(a, b) {
return b.name.localeCompare(a.name, "zh");
});
flag = true;
}
}
//年龄排序封装函数
function ageSort() {
if (flag == true) {
var ary3 = ary.sort(function(a, b) {
return a.age - b.age;
});
flag = false;
} else {
var ary3 = ary.sort(function(a, b) {
return b.age - a.age;
});
flag = true;
}
}
//按姓名点击事件
inputs[0].onclick = function() {
nameSort();
create(ary2);
};
//按年龄点击事件
inputs[1].onclick = function() {
ageSort();
create(ary2);
};