前端开发之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 ...
随机推荐
- flask第十五篇——Response
从这一节开始,我就要开始讲关于模板的知识了.先来学习一下Response的相关知识. 所有返回前台的内容其实都应该是Response的对象或者其子类,我们看到如果返回的是字符串直接可以写成return ...
- 自定义vue全局组件use使用(解释vue.use()的原理)
我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...
- 修改 CentOS 中的 repo
修改 CentOS 中的 repo 原因 由于安装 odoo 10 太慢,因为服务器是国外的. 修改 进入 repo 文件夹 cd /etc/yum.repos.d/ ls 可以看到所有的源.
- JavaFX 之窗口大小自由拉伸（四）
一.问题场景 同样的,隐藏掉窗体的默认标题栏也会导致窗体大小自由拉伸功能的失效. 二.解决思路 判断鼠标在窗体的位置,改变鼠标样式,给窗体组件添加拖拽事件监听器,根据鼠标移动位置改变窗体大小. 三.代 ...
- 贴一段demo代码，演示channel之间的同步
package main import ( "fmt" "time" ) func deskGoRoutine(index int, userChannel c ...
- java根据特定密钥对字符串进行加解密
package com.test; import java.io.IOException; import java.security.SecureRandom; import javax.crypto ...
- 双口RAM，值得研究
在FPGA设计过程中,使用好双口RAM,也是提高效率的一种方法. 官方将双口RAM分为简单双口RAM和真双口RAM. 简单双口RAM只有一个写端口,一个读端口. 真双口RAM分别有两个写端口和两个读端 ...
- android 文件上传，中文utf-8编码
要上传文件到后台的php服务器,服务器能收到中文,手机发送过去,却只能收到一堆转了UTF-8的编码(就是要decode后才是中文的编码).android这边上传文件通常是用stream方式上传的,用M ...
- STM32=LWIP
https://blog.csdn.net/zouw96/article/details/8443141
- 第三方登录之微信登录，基于ThinkSDK
本文基于ThinkSDK,为其补充微信登录demo 增加ThinkSDK的微信第三方登录 阅读本文之前请先了解ThinkSDK的文档 http://www.echomod.com/nexstep/fo ...