2.模态框(案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style type="text/css">
*{padding:0;margin:0;}
html,body{height: 100%}
#box{width: 100%;height: 100%;background: rgba(0,0,0,.3);}
#content{
position: relative;
top:150px;
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
color: rgba(227,92,19,0.6);
background-color: rgba(89,227,160,0.73);
margin: auto;
}
#span1{
position: absolute;
color: rgba(7,1,2,0.73);
background-color: rgba(227,20,43,0.73);
top:0;
right: 0;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 10%;
}
</style>
</head>
<body>
<button id="btn">弹出</button>
</body>
<script type="text/javascript">
//dom document object model
//html页面为树状结构.
console.log(document);
//获取dom元素
var btn = document.getElementById("btn");
//创建divdom元素
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span');
oDiv.id = 'box';
oP.id = 'content';
oSpan.id = 'span1';
oP.innerHTML = '模态框成功弹出';
oSpan.innerHTML = 'x';
//为节点添加子节点
oDiv.appendChild(oP);
oP.appendChild(oSpan);
btn.onclick = function (ev) {
// alert("哈哈")
//动态的添加到body中一个div
// console.log(btn.parentNode)
btn.parentNode.insertBefore(oDiv,btn)
};
oSpan.onclick = function (ev) {
//移除方法
oDiv.parentNode.removeChild(oDiv)
}
</script>
</html>
3.点击有惊喜(案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击有惊喜</title>
<style type="text/css">
*{padding: 0;margin: 0;}
.box{
width: 200px;
height: 200px;
background-color: rgba(225,21,6,0.73);
text-align: center;
color: rgba(87,225,10,0.73);
line-height: 200px;
font-size: 23px;
font-weight: bold;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="box">
点击有惊喜！
</div>
</body>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0];
var a = 0;
oBox.onclick = function () {
a++;
if(a % 4 === 1){
this.style.background = 'green';
this.innerText = "请继续点击！" ;
}
else if(a % 4 === 2){
this.style.background = 'blue';
this.innerText = "哈哈，nono！" ;
}
else if(a % 4 === 3){
this.style.background = 'transparent'; //透明效果
this.innerText = ''
}
else {
this.style.background = 'red';
this.innerText = "点击有惊喜" ;
}
}
</script>
</html>
4.简易留言框(案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易留言框</title>
<style type="text/css">
/**{padding:0;margin: 0;}*/
li {
/*cursor: crosshair;*/
}
</style>
</head>
<body>
<h1>简易留言板</h1>
<div id="box">
</div>
<textarea id="msg"></textarea>
<input type="button" id="btn" value="留言">
<button onclick="sum()">统计</button>
</body>
<script type="text/javascript">
//获得插入对象的盒子
var box = document.getElementById('box');
//生成列表
var ul = document.createElement("ul");
box.appendChild(ul);
var btn = document.getElementById("btn");
var msg = document.getElementById("msg");
var count = 0;
btn.onclick = function () {
if(msg.value.trim() !== ''){
var li = document.createElement('li');
li.innerHTML = msg.value + '<span> X</span>';
var lis = document.getElementsByTagName('li');
if(lis.length === 0){
ul.appendChild(li);
count++;
}
else{
ul.insertBefore(li,lis[0]);
count++;
}
msg.value = '';
var spans = document.getElementsByTagName('span');
for(var i = 0;i<spans.length;i++){
spans[i].onclick = function (ev) {
ul.removeChild(this.parentNode);
count--;
}
}
}
}
function sum() {
alert("一共发布了" + count + "条留言");
}
</script>
</html>
5.选项框(案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
*{
padding: 0;
margin: 0px;
}
ul{list-style: none;}
#tab{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
ul li{
float:left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: rgba(141,111,113,0.73);
}
ul li a{
text-decoration: none;
color: black;
}
li.active{
background-color: white;
}
/*先将选项卡部分隐藏，用js实现显示*/
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: white;
}
/*js设置相应类名并实现显示效果*/
p.active{
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">图片</a></li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div>
</body>
<script type="text/javascript">
var tabli = document.getElementsByTagName('li');
var tabContent = document.getElementsByTagName('p');
for(var i = 0; i < tabli.length;i++){
//for循环会一次性循环完毕，到最后i的值为遍历的最后的值
//为了保存i变量，可以为每个元素的一个index属性赋值！
tabli[i].index = i;
tabli[i].onclick = function (ev) {
for(var j = 0;j < tabli.length;j++){
tabli[j].className = '';
tabContent[j].className = '';
}
this.className = 'active';
tabContent[this.index].className = 'active';
}
}
</script>
</html>
6.仿淘宝搜索框(案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: rgba(255,165,0,0.73);
}
a:hover{
background-color: rgba(255,248,5,0.73);
}
#title{
margin-top: 20px;
margin-left: 5px;
}
#title span{
font-size: 16px;
color: rgba(255,106,120,0.73);
cursor: default;
}
.turn{
background-color: rgba(255,165,0,0.73);
border-radius: 5px;
color: white;
}
#search{
position: relative;
}
#submit{
position: absolute;
height: 25px;
width: 40px;
font-size: 12px;
border: 3px solid orange;
/*top:20px;*/
left: 455px;
border-radius: 10px;
background-color: rgba(255,111,9,0.73);
color: white;
outline:none;
}
#submit:hover{
background-color: rgba(255,5,33,0.73);
}
#text{
/*清空输入框的外线(选中时没有默认的阴影)*/
outline:none;
/*display: block;*/
width: 490px;
height: 20px;
font-size: 12px;
border: 2px solid orange;
/*margin-top: 20px;*/
border-radius: 10px;
}
label{
position: absolute;
font-size: 12px;
color: rgba(141,131,117,0.73);
top:5px;
left: 10px;
}
ul{
overflow: hidden;
display: none;
}
li{
float: left;
font-size: 12px;
margin-left: 10px;
}
.footmsg{
display: block;
}
</style>
</head>
<body>
<div id="title">
<span class="turn">家电</span>
<span>亲子</span>
<span>商务</span>
</div>
<div id="search">
<input type="text" id="text">
<label for="txt" id="msg">路飞学城</label>
<input type="submit" id='submit' value="搜索">
<!--<input type="submit" value="搜索">-->
</div>
<div class="foot">
<ul class = 'footmsg' type="none">
<li><a href="#">家电</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">家电</a></li>
</ul>
<ul type="none">
<li><a href="#">亲子</a></li>
<li><a href="#">亲子</a></li>
<li><a href="#">亲子</a></li>
<li><a href="#">亲子</a></li>
<li><a href="#">亲子</a></li>
</ul>
<ul type="none">
<li><a href="#">商务</a></li>
<li><a href="#">商务</a></li>
<li><a href="#">商务</a></li>
<li><a href="#">商务</a></li>
<li><a href="#">商务</a></li>
</ul>
</div>
</body>
<script type="text/javascript">
var txt = document.getElementById('text');
var msg = document.getElementById('msg');
// 检测用户表单输入的时候
txt.oninput = function (ev) {
if(this.value !== ''){
msg.style.display = 'none';
}
else{
msg.style.display = 'block';
}
}
var title = document.getElementsByTagName('span');
var footmsg = document.getElementsByTagName('ul');
for(var i = 0; i < title.length; i++){
title[i].index = i;
title[i].onclick = function () {
for(var j = 0;j < title.length; j++){
title[j].className = '';
footmsg[j].className = '';
}
this.className = 'turn';
footmsg[this.index].className = 'footmsg';
}
}
</script>
</html>
7.获取当前时间(案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取时间</title>
<style type="text/css">
</style>
</head>
<body>
</body>
<script type="text/javascript">
//定时器
setInterval(function () {
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDay();
var h = modify(date.getHours());
var min = modify(date.getMinutes());
var s = modify(date.getSeconds());
document.body.innerHTML = "今天是" + y + '年' + m + '月' + d + "日 " + h + ':' + min + ':' + s
},1000);
function modify(second) {
if(second < 10){
return "0" + second;
}
else{
return second;
}
}
</script>
</html>
8.匀速运动(案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匀速运动</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: rgba(255,37,31,0.73);
position: absolute;
top:50px;
left: 0;
}
</style>
</head>
<body>
<div id="wrap">
<button id="btn">运动</button>
<div class="box" id="box1">
</div>
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
var box1 = document.getElementById('box1');
var count = 0;
var stopId = null;
btn.onclick = function () {
stopId = setInterval(function () {
count++;
if(count > 1000){
clearInterval(stopId);
box1.style.display = 'none';
}
box1.style.left = count + "px";
})
}
</script>
</html>
9.定时关闭广告(案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关闭网站</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.adv{
position: fixed;
top:50px;
}
#left{
left: 0;
}
#right{
right: 0;
}
.adv span{
position:absolute;
top: 2px;
right: 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="adv" id="left">
<img src="./tanwanlanyue2.jpg" alt="" >
<span class="cancle">X</span>
</div>
<div class="adv" id="right">
<img src="./tanwanlanyue2.jpg" alt="" >
<span class="cancle">X</span>
</div >
</body>
<script type="text/javascript">
//html页面加载的时候就执行(一般js代码必须等到所有的dom元素加载完毕才开始执行)
window.onload = function (ev) {
var left = document.getElementById('left');
var right = document.getElementById('right');
var cancle = document.getElementsByClassName('cancle');
setTimeout(function () {
left.style.display = 'none';
right.style.display = 'none';
},5000);
for(var i = 0; i < cancle.length; i++){
cancle[i].index = i;
cancle[i].onclick = function () {
this.parentNode.remove()
}
}
}
</script>
</html>
10.小米滚动(案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米滚动</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.wrap{
width: 801px;
height: 800px;
border:3px solid #C60F02;
position: relative;
overflow: hidden;
margin: 100px auto;
}
.wrap span{
width: 100%;
height: 400px;
position: absolute;
}
.up{
top:0;
}
.down{
bottom: 0;
}
img{
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="box" class="wrap">
<img src="./charm4.jpg" id="xiaomi">
<span class="up" id="picUp"></span>
<span class="down" id="picDown"></span>
</div>
</body>
<script type="text/javascript">
var up = document.getElementById('picUp');
var down = document.getElementById('picDown');
var img = document.getElementById('xiaomi');
var count = 0;
var time = null;
//鼠标移入的时候发生的事件
up.onmouseover = function (ev) {
//清理之前的定时器,比如down的
clearInterval(time);
time = setInterval(function () {
count -= 3;
count >= 800-1200 ? img.style.top = count + 'px':clearInterval(time);
},30)
}
down.onmouseover = function (ev) {
//清理之前的定时器,比如up的
clearInterval(time);
time = setInterval(function () {
count += 3;
count <= 0 ? img.style.top = count + 'px':clearInterval(time);
},30)
}
</script>
</html>
11.无缝轮播图(案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝轮播图</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
position: absolute;
}
ul li{
float: left;
}
img{
width: 420px;
height: 270px;
}
.box{
width: 840px;
height: 270px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
/*设置列表的宽度*/
.box ul{
width: 700%;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#"><img src="./轮播图/1.jpg"></a></li>
<li><a href="#"><img src="./轮播图/2.jpg"></a></li>
<li><a href="#"><img src="./轮播图/3.jpg"></a></li>
<li><a href="#"><img src="./轮播图/4.jpg"></a></li>
<li><a href="#"><img src="./轮播图/5.jpg"></a></li>
<li><a href="#"><img src="./轮播图/6.jpg"></a></li>
<li><a href="#"><img src="./轮播图/7.jpg"></a></li>
</ul>
</div>
</body>
<script type="text/javascript">
var box = document.getElementsByClassName('box')[0];
var time = null;
var num = 0;
//取子节点的方法
var ul = box.children[0];
function autoPlay() {
num--;
num <= -(420 * 5) ? num = 0:num;
ul.style.left = num + "px";
}
time = setInterval(autoPlay,30);
//鼠标移上去的时候的事件
box.onmouseover = function () {
clearInterval(time);
};
//鼠标移开的时候
box.onmouseout = function () {
time = setInterval(autoPlay,30);
}
</script>
</html>
