前端开发之JavaScript HTML DOM实战篇
实战案例一：
“灯泡发光”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javaScript案例之点亮灯泡</title>
<style type="text/css">
img{
width:100px;
height:180px;
margin:50px 50%;
} </style>
</head>
<body>
<img id="myLight" onclick="changeImage()" src="data:images/pic_bulboff.gif" title="点击灯泡发光或关闭" >
<script>
function changeImage(){
element = document.getElementById("myLight");
if(element.src.match('bulbon')){
element.src="data:images/pic_bulboff.gif";
} else{
element.src="data:images/pic_bulbon.gif";
}
}
</script>
</body>
</html>
实战案例二：
模态框 -- 点击页面按钮，弹出模态框，弹出后可取消显示，恢复开始界面。
<!DOCTYPE html>
<html lang="en">
<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,.2);// 依次是红，绿，蓝，透明度（0到1）
}
#content{
position:relative;
top:150px;
width:400px;
height:200px;
line-height:200px;
text-align:center;
color:greenyellow;
background-color: #3e8f3e;
margin:0 auto;
}
#span1{
position:absolute;
background-color: #66afe9;
top:0;
right:0;
width:25px;
height:25px;
line-height:25px;
text-align:center;
color:white;
}
</style>
<body>
<button id="btn" style="margin:10px 45%;width:60px;height:25px;">弹出</button>
<div class="container" >
<p style="color:rebeccapurple;margin-left:40%;">点击上方按钮，弹出模态框</p>
</div> </body>
<script type="text/javascript">
var btn = document.getElementById("btn"); // 获取按钮元素
var dom_div = document.createElement("div"); // 创建div节点
var dom_p = document.createElement("p"); // 创建p节点
var dom_span = document.createElement("span"); // 创建span节点
// 设置id和设置文本
dom_div.id = "box";
dom_p.id = "content";
dom_p.innerHTML = "模态框成功弹出";
dom_span.id = "span1";
dom_span.innerHTML ="X"; dom_div.appendChild(dom_p);// 将新建的p节点添加到新建的div上
dom_p.appendChild(dom_span);// 将span节点添加到p节点上 btn.onclick = function(){
// 向body动态添加一个div
btn.parentNode.insertBefore(dom_div,btn);
}
dom_span.onclick = function(){
// 点击模态框中的“X”取消显示
dom_div.parentNode.removeChild(dom_div);
}
</script>
</html>
实战案例三：
“点击有惊喜” -- 点击桌面的方框，每点击一次会切换不同的显示，最后切换回初始界面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>点击有惊喜</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width:300px;
height:200px;
margin:200px auto;
background: red;
border:1px solid greenyellow;
text-align: center;
line-height:200px;
font-size:18px;
color:royalblue;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
点击有惊喜！
</div>
</body>
<script type="text/javascript">
var dom_box = document.getElementsByClassName("box")[0];
var n = 0;
dom_box.onclick = function(){
n++;
if(n%3==1){
dom_box.style.background="yellow";
dom_box.innerText = "上当了吧！Too young too simple";
}
else if(n%3==2){
dom_box.style.background="blue";
dom_box.innerText = "上当了吧！Too young too simple";
}
else{
dom_box.style.background="red";
dom_box.innerText = "点击继续！";
}
} </script>
</html>
实战案例四：
通过HTML、CSS和javascript制作一个简单的留言板。
可写留言，将留言加入列表，逐条删除留言，统计留言数目。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>留言板</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background: #d4ffc0;
}
h1{
margin-left:350px;
margin-top:50px;
color: #99c2ff;
font-family: "Adobe 楷体 Std R";
} textarea{
margin-left:350px;
margin-top:20px;
border: 1px solid palegreen;
position:relative;
}
input{
width:60px;
height:20px;
text-align: center;
}
button{
width:60px;
height:20px;
}
ul{
margin-left:350px;
margin-top:20px;
list-style:none;
}
ul li span{
margin-left: 100px;
cursor: pointer;
}
ul li span:hover{
color:red;
}
</style>
</head>
<body>
<h1>欢迎来到留言板</h1>
<div id="box"> </div>
<textarea id="msg" placeholder="此处写留言"></textarea>
<input type="button" id="btn" value="留言" >
<button onclick="sum()">统计</button>
</body>
<script type="text/javascript">
var dom_ul = document.createElement("ul"); // 创建节点
var dom_box = document.getElementById("box");// 获取节点
dom_box.appendChild(dom_ul);//添加子节点 var dom_btn = document.getElementById("btn");// 获取节点
var dom_msg = document.getElementById("msg");// 获取节点
var count = 0; // 统计留言条数
dom_btn.onclick = function(){
var dom_li = document.createElement("li");// 创建节点
var li_msg = document.getElementsByTagName("li");// 通过节点获取内容
console.log(li_msg);
// 设置内容
dom_li.innerHTML = dom_msg.value + "<span alt='删除'>x</span>";
if(li_msg.length == 0){
dom_ul.appendChild(dom_li); // 将留言添加到无序列表中
count++; // 留言数目加1
}
else{
dom_ul.insertBefore(dom_li,li_msg[0]);//将留言添加到无序列表已有的留言最前面
count++;// 留言数目加1
}
dom_msg.value = ""; // 清空输入框内的留言
var dom_span = document.getElementsByTagName("span");// 获取节点元素
for(var i=0;i<dom_span.length;i++){
dom_span[i].onclick = function(){
dom_ul.removeChild(this.parentNode);// 删除li节点，this表示span节点
count--;
}
} }
function sum(){
alert("你一共发布了"+count+"条留言！");
}
</script>
</html>
实战案例五：
选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
#box{
width:600px;
margin:100px auto;
border:1px solid palegreen;
}
ul li{
width:150px;
height:40px;
background-color: #cbf0ff;
text-align: center;
line-height: 40px;
font-size:15px;
float:left; }
li.active{
background-color: #8f83ff;
font-size:18px;
}
p{
width:600px;
height:300px;
background-color: #96ff27;
line-height: 300px;
text-align: center;
font-size:30px;
font-family: Arial;
display: none;
}
p.active{
background-color: #8f83ff;
display:block;
color: #86ff9c;
} </style>
</head>
<body>
<div id="box">
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">人物</a></li>
<li><a href="#">风景</a></li>
<li><a href="#">建筑</a></li>
</ul>
<p class="active">显示首页</p>
<p>显示人物</p>
<p>显示风景</p>
<p>显示建筑</p>
</div>
</body>
<script type="text/javascript">
var box_li = document.getElementsByTagName("li");
var p_content = document.getElementsByTagName("p");
for(var i=0;i<box_li.length;i++){
box_li[i].index = i;
box_li[i].onclick = function(){
for(var j=0;j<p_content.length;j++){
box_li[j].className = "";
p_content[j].className = "";
}
this.className = "active"; // this表示当前点击的li节点
p_content[this.index].className = "active";
}
}
</script>
</html>
实战案例六：
仿淘宝搜索栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>仿淘宝搜索框</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.search{
position:relative;
}
input{
width:300px;
height:30px;
border:1px solid deepskyblue;
border-radius:5px;
margin-top:30px;
margin-left:300px;
display:block;
outline: none;
}
label{
/*margin-left:310px;*/
top:4px;
left:310px;
font-size:16px;
color: #8489ff;
position:absolute; }
</style>
</head>
<body>
<div class="search">
<input type="search" id="text" />
<label for="txt" id="msg">你好，天猫</label>
</div>
</body>
<script type="text/javascript">
var dom_text = document.getElementById("text");
var dom_msg = document.getElementById("msg");
// 检测到用户输入时
dom_text.oninput = function(){
if(this.value==""){
dom_msg.style = "block";
}
else{
dom_msg.style.display = "none";
}
}
</script>
</html>
实战案例七：
匀速运动的”小广告“ --- 点击按钮 ，使”广告“运动起来，并设置为运动一定时间后消失（提示：使用定时器）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>匀速运动</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
button{
width:80px;
height:30px;
border:1px solid cornflowerblue;
border-radius:10px;
background-color: transparent;
}
button:hover{
background-color: #99a3ff;
}
#box{
width:150px;
height:100px;
background-color: #acffe5;
top:50px;
left:0;
position:absolute;
text-align: center;
line-height: 100px;
color: #d693ff;
}
</style>
</head>
<body>
<button id="btn_run">点击运动</button>
<div id="box">
我会匀速运动额！
</div> </body>
<script type="text/javascript">
var dom_btn = document.getElementById("btn_run");
var dom_box = document.getElementById("box");
var count = 0;
var time = null;
dom_btn.onclick = function(){
time = setInterval(function(){
count += 1;
if(count>1000){
clearInterval(time);
dom_box.style.display = "none";
}
dom_box.style.left = count+"px";
},20)
}
</script>
</html>
实战案例八：
10秒后关闭广告！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
width:100%;
height:100%;
}
img{
position:fixed;
}
#left{
left:0;
}
#right{
right:0;
}
p{
text-align:center;
font-size:20px;
}
span{
color:firebrick;
}
</style>
</head>
<body>
<img src="./images/beautiful.gif" id="left">
<img src="./images/adver2.jpg" id="right">
<p id="p1">广告倒计时<span>10s</span></p>
</body>
<script type="text/javascript">
window.onload = function(){
var dom_adver1 = document.getElementById("left");
var dom_adver2 = document.getElementById("right");
var dom_p = document.getElementById("p1");
var count = 10;
var time = null;
time = setInterval(function() {
if (count <= 1) {
clearInterval(time);
dom_adver1.style.display = "none";
dom_adver2.style.display = "none";
}
count--;
dom_p.innerHTML = "广告倒计时" +"<span>"+ count + "s"+"</span>";
},1000)
} </script>
</html>
实战案例九：
页面滚动示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>滚动条</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
#wrap{
margin:100px auto;
width:512px;
height:300px;
border:1px solid yellowgreen;
overflow: hidden;
position:relative;
}
#wrap span{
height:150px;
width:100%;
position:absolute;
}
.m_up{
top:0;
}
.m_down{
bottom:0;
}
#box{
top:0;
bottom:0;
height:1200px;
width:100%;
position:absolute;
background-color: #fecfff;
}
.p1{
height:400px;
background-color: #ffdabc;
text-align: center;
line-height: 400px;
font-size:30px;
}
.p2{
height:400px;
background-color: #abff8a;
text-align: center;
line-height: 400px;
font-size:30px;
}
.p3{
height:400px;
background-color: #78dbff;
text-align: center;
line-height: 400px;
font-size:30px;
}
</style>
</head>
<body> <div id="wrap">
<div id="box">
<p class="p1" >我是第一页</p>
<p class="p2" >我是第二页</p>
<p class="p3" >我是第三页</p>
</div>
<span class="m_up" id="up"></span>
<span class="m_down" id="down"></span>
</div> </body>
<script type="text/javascript">
var dom_up = document.getElementById("up");
var dom_down = document.getElementById("down");
var dom_box = document.getElementById("box");
var count = 0;
var time = null;
dom_up.onmouseover = function(){
clearInterval(time);
time = setInterval(function(){
count -= 3;
count > -900 ? dom_box.style.top = count+"px":clearInterval(time);
},30)
}
dom_down.onmouseover = function(){
clearInterval(time);
time = setInterval(function(){
count += 3;
count < 0 ? dom_box.style.top = count+"px":clearInterval(time);
},30)
}
实战案例十：
轮播图动画（图片大小为1920*1080，可以换成自己喜欢的，如大小与我的不同，修改一下图片复位时时的数值，还有记得位置也要修改额！）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
list-style: none;
}
.box{
width:1920px;
height:1080px;
margin:100px auto;
overflow: hidden;
position:relative;
}
.box ul{
width:300%;
position:absolute;
top:0;
left:0;
}
ul li{
float:left;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="data:images/pic1.png"></li>
<li><img src="data:images/pic2.jpg"></li>
<li><img src="data:images/pic3.png"></li>
</ul>
</div>
</body>
<script type="text/javascript">
// 设置自动播放
var dom_box = document.getElementsByClassName("box")[0];
var dom_ul = dom_box.children[0];
var num = 0;// 图片左侧运动的位置
var timer = null;
timer = setInterval(autoPlay,30);
// 函数具体声明
function autoPlay(){
num -= 10; // 每30ms向左移动10px
num < -3840 ? num=0:num; // 总共3张图片，每张图片宽度为1920，所以当第三张左侧贴到边框左侧时，图片位置复位
dom_ul.style.left = num+"px"; // 不断无序列表修改位置
}
// 鼠标移到图片上，停止移动
dom_box.onmouseover = function(){
clearInterval(timer); // 清理定时器
}
dom_box.onmouseout = function(){
timer = setInterval(autoPlay,40);// 重新设置定时器
} </script>
</html>
未完，待续...
前端开发之JavaScript HTML DOM实战篇的更多相关文章
- 前端开发之JavaScript HTML DOM理论篇一
主要内容: 1.DOM简介 2.DOM 节点 3.DOM 方法和属性 4.DOM 访问和修改 一.DOM简介 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTM ...
- 前端开发之JavaScript HTML DOM理论篇二
主要内容: 1.HTML DOM元素 2.HTML DOM事件 一.DOM元素 主要操作有添加.删除和替换HTML元素 1.创建新的HTML元素 (1)方法一: appendChild() 追加 如 ...
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
- 前端开发之JavaScript基础篇一
主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换 ...
- 前端开发之javascript BOM篇
主要内容: 1.BOM输出 2.BOM的对象 3.client的相关属性 4.offset的相关属性 5.scroll的相关属性 前情提要: 何谓BOM? 所谓 BOM 指的就是浏览器对象模型 Bro ...
- 前端开发之JavaScript基础篇四
主要内容: 1.定时器 2.正则表达式入门 3.元字符 4.正则表达式实战运用 一.定时器 javaScript里主要使用两种定时器,分别是:setInterval()和setTimeout(). 1 ...
- 前端开发之JavaScript基础篇三
主要内容: 1.创建对象的几种方式 2.JavaScript内置对象 3.JavaScript错误--Throw.Try 和 Catch 4.JavaScript 表单验证 一.创建对象的几种方式 1 ...
- 前端开发之JavaScript基础篇二
主要内容: 1.流程控制条件语句和switch语句 2.for循环和while循环 3.Break语句和Continue语句 4.数组和数组常用方法 5.函数 6.对象 一.流程控制条件语句和swit ...
- 前端开发之BOM和DOM（转载）
BOM BOM:是指浏览器对象模型,它使JavaScript可以和浏览器进行交互. 1,navigator对象:浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息. naviga ...
随机推荐
- WordCount运行详解
1.MapReduce理论简介 1.1 MapReduce编程模型 MapReduce采用"分而治之"的思想,把对大规模数据集的操作,分发给一个主节点管理下的各个分节点共同完成,然 ...
- linux压缩打包等
删除 rm -rf 目录 tar -zcvf /home/xahot.tar.gz /xahot tar -zcvf 打包后生成的文件名全路径 要打包的目录 例子:把/xahot文件夹打包后生成一个/ ...
- (高级篇)jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- ASP.NET常用标准配置web.config
在我们的项目开发过程中,我们经常要配置wei.config文件,而大多数的时候配置差不多,下面的是一个简单的配置,其他的配置可以在这个基础上在添加 <?xml version="1.0 ...
- [LeetCode系列]有序链表转换为平衡BST的递归解法
给定有序链表(元素由小到大), 试问如何将其转换为一个平衡BST? 平衡BST: 任意节点的左右子树的深度差值不大于1. 主要思想是用递归. Trick是使用快慢指针来获取中间节点. 获得中间节点后, ...
- 5.Python使用最新爬虫工具requests-html
1.安装,在命令行输入:pip install requests-html,安装成功后,在Pycharm引入即可. 2.代码如下所示: from requests_html import HTMLSe ...
- mac链接linux
连接 : ssh 用户名@主机名 -- ssh -p 22 root@47.98.164.34 上传: scp 要上传的文件名称 用户名@主机名:上传到的路径 下载: scp 用户名@主 ...
- 怎么使用ping命令进行连通性测试
关于ping命令的作用: ping 命令有助于验证网络层的连通性!一般进行网络故障排除时,可以使用ping 命令向目标计算机或IP地址发送ICMP回显请求,目标计算机会返回回显应答,如果目标计算机不能 ...
- Java 输入一个整数，计算它各位上数字的和。(注意:是任意位的整数)
import java.util.*; /* * 输入一个整数,计算它各位上数字的和. * (注意:是任意位的整数) */ public class Sum02 { public static voi ...
- Socket通讯介绍
综上原理,代码的实施的步骤如下: Socket Families(地址簇)的三种类型,这个时候是网络层 socket.AF_UNIX unix本机进程间通信 本机之间的不同进程通讯默认是不可以通讯的, ...