DOM事件练习 I
目录
input框动态显示事件
<head>
<meta charset="UTF-8">
<title>动态显示时间</title>
<style>
input{width:200px;}
</style>
</head>
<body>
<input type="text" id="time">
<button id="switch">开始</button>
</body>
<script>
var btn = document.getElementById('switch');
btn.onclick = function () {
switch (this.innerText) {
case '开始':
this.innerText = '停止';
timer1 = setInterval(update,1000);
break;
case '停止':
this.innerText = '开始';
clearInterval(timer1);
break;
}
};
function update() {
var t = document.getElementById('time');
var dt = new Date();
t.value = dt.toLocaleString();
}
</script>
input框动态显示事件
红绿灯
<head>
<meta charset="UTF-8">
<title>事件-红绿灯</title>
<style>
.fa{display: inline-block; padding: 5px;border-radius: 10px;border-color: darkgray;border-style: solid}
.div0{width:100px;height:100px;border-radius: 50px; float: left;
border-color: white;background-color: gray;
display: inline-block;margin: 0;}
.div2{background-color: green;}
.div1{background-color: red;}
.div3{background-color: yellow;}
</style>
</head>
<body>
<div class="fa">
<div id="d0" class="div0 div1"></div>
<div id="d1" class="div0"></div>
<div id="d2" class="div0"></div>
</div>
<script>
function change()
{
var tem = document.getElementsByClassName('div0');
if (tem[0].classList.contains('div1'))
{
tem[0].classList.remove('div1');
tem[1].classList.add('div2');
}
else if (tem[1].classList.contains('div2'))
{
tem[1].classList.remove('div2');
tem[2].classList.add('div3');
}
else if (tem[2].classList.contains('div3'))
{
tem[2].classList.remove('div3');
tem[0].classList.add('div1');
}
}
setInterval(change,1000);
</script>
</body>
红绿灯模拟
顶部广告栏关闭
<head>
<meta charset="UTF-8">
<title>顶部广告关闭</title>
<style>
body{margin:0 ;}
.ad{ position:fixed ; top:0; width: 100%; height: 100px;
background-color: darkblue;opacity: 0.5}
.ad_content{position: fixed;top:0; padding:20px;color: #53ff09}
#close{position: fixed;top: 0; right: 0; background-color: lightyellow;
height: 20px;width:20px;text-align:center; line-height: 20px;font-size:30px}
.content{height: 1000px;background-color: gray}
</style>
</head>
<body>
<div class="ad" id="ad">
<div class="ad_content">
LOL新赛季即将开启，敬请期待
</div>
<div id="close">
x
</div>
</div>
<div class="content">
详情请关注LOL世界锦标赛官方微博
详情请关注LOL世界锦标赛官方微博
详情请关注LOL世界锦标赛官方微博
详情请关注LOL世界锦标赛官方微博
详情请关注LOL世界锦标赛官方微博
详情请关注LOL世界锦标赛官方微博
详情请关注LOL世界锦标赛官方微博
详情请关注LOL世界锦标赛官方微博
详情请关注LOL世界锦标赛官方微博
详情请关注LOL世界锦标赛官方微博
详情请关注LOL世界锦标赛官方微博
详情请关注LOL世界锦标赛官方微博
</div>
</body>
<script>
var closebtn = document.getElementById('close');
closebtn.onclick = function () {
var ad= document.getElementById('ad');
ad.style.display = 'none';
}
</script>
顶部广告
鼠标悬停IMG上时，更换另一张图片
//需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序 <body>
<img src="1.jpg" id="box" style="cursor: pointer;border: 1px solid #ccc;" >
</body>
<script>
var img = document.getElementById('box');
img.onmouseover = function () {
img.src = '2.jpg';
};
img.onmouseout = function () {
img.src = '1.jpg'
};
</script>
鼠标悬停更换图片
悬浮框自动出现
<head>
<meta charset="UTF-8">
<title>自动出现</title>
<style>
.d1{width:70px; height:25px;background-color: #cccccc;position: fixed;
bottom: 50px;right: 50px;text-align: center;line-height: 25px;border-radius: 5px;}
.d2{display: none}
.a1{text-decoration: none; color: #ff6700}
</style>
</head>
<body>
<div style="width: 100% ; height: 2000px;background-color: gray"></div>
<div class="d1 d2" id="d1"><a class="a1" id="a1" href="#">回到顶部</a></div>
</body>
<script>
var sl = document.getElementById('d1');
window.onscroll = function () {
console.log(document.documentElement.scrollTop);
if (document.documentElement.scrollTop>700){
sl.classList.remove('d2');
}
else { sl.classList.add('d2'); }
};
</script>
// 行内实现
<body>
<div style="height: 4000px;width:20px;background-color: #ff6700"></div>
<p><a id="a1" style="position: fixed; bottom: 200px; z-index: 100; background-color: gray; right: 100px; color: white; display: block; padding: 5px; border-radius: 5px; text-decoration: none;" href="#">回到顶部</a></p>
</body>
<script>
var ab= document.getElementById('a1');
window.onscroll = function () {
console.log(document.documentElement.scrollTop);
console.log(ab.style.display);
if (document.documentElement.scrollTop>700){
ab.style.display = 'block';
}
else { ab.style.display = 'none'; }
};
</script>
</html>
悬浮框自动出现
模态框案例
需求：打开网页时有一个普通的按钮，点击当前按钮显示一个背景图，中心并弹出一个弹出框，点击X的时候会关闭当前的模态框。
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style>
*{margin:0;padding :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: red; background-color: #fff;margin:auto; }
#span1{position:absolute;background-color: red;top: 0 ;right:0;width: 30px;
height: 30px;text-align: center;color:#fff;line-height: 30px;}
</style>
</head>
<body>
<button id="btn">弹出</button>
</body>
<script type="text/javascript">
//获取dom元素：1获取事件源
var oBtn = document.getElementById('btn');
//创建弹出模态框的相关dom对象
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span');
//设置属性
oDiv.id = 'box';
oP.id = 'content';
oP.innerHTML='模态框弹出显示的内容';
oSpan.innerText = 'X';
oSpan.id = 'span1';
//追加元素
oDiv.appendChild(oP);
oP.appendChild(oSpan);
//设置点击弹窗按钮 弹出模态框
oBtn.onclick = function () {
this.parentNode.insertBefore(oDiv,oBtn);
};
//设置关闭按钮，关闭模态框
oSpan.onclick = function () {
oDiv.parentNode.removeChild(oDiv)
}
</script>
</html>
模态框
DOM事件练习 I的更多相关文章
- DOM 事件深入浅出（二）
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
- DOM 事件深入浅出（一）
在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...
- DOM事件
在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...
- 理解DOM事件流的三个阶段
本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...
- 你真的了解DOM事件么？
你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和 ...
- [DOM Event Learning] Section 4 事件分发和DOM事件流
[DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...
- dom事件与event对象总结
1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间. tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序. 事件 ...
- DOM事件简介－－摘自admin10000
Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部 ...
- 从click事件理解DOM事件流
事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这 ...
- DOM事件机制进一步理解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- 帝都之行5day：还是工作上的事
前两天开始面试找工作,周一整好简历,学历不行也没办法,但还是如实写了,自己看了一下,觉得还凑合,毕竟还是有几年经验的,就开始投了 选了十来个智联推荐的企业,然后把简历设为公开,开始等消息吧…… 投递成 ...
- 网络摘抄jdk1.8——jvm分析与调优
一.JVM空间说明 JDK 1.7及以前,Java 类信息.常量池.静态变量都存储在 Perm(永久代)里.类的元数据和静态变量在类加载的时候分配到 Perm,当类被卸载的时候垃圾收集器从 Perm ...
- 顺序表应用3：元素位置互换之移位算法（SDUT 3326）
题解:用一个for,循环m次,每次都把最前面的放到最后面,就可以了. #include <stdio.h> #include <stdlib.h> #include <s ...
- bzoj3990
排序 HYSBZ - 3990 小A有一个1-2^N的排列A[1..2^N],他希望将A数组从小到大排序,小A可以执行的操作有N种,每种操作最多可以执行一次,对于所有的i(1<=i<=N) ...
- Django-rbac权限
1.注册应用rbac 2.设计表 权限表 角色表 用户表 不同角色有不同的权限,给每个用户分配不同的角色(一个用户可以有多个角色) 3.数据注入 将数据注入在rbac中封装成一个函数 4.权限认证是在 ...
- PTA 二叉树路径
二叉树的路径 (25 分) 二叉树是一种普通的数据结构.给出一棵无限的二叉树,节点被标识为一对整数,构造如下: (1)树根被标识为整数对(1,1). (2)如果一个节点被标识为(a,b ...
- vue 项目安装
安装stylus npm install stylus stylus-loader --save-dev
- JavaWeb_(Struts2框架)拦截器interceptor
此系列博文基于同一个项目已上传至github 传送门 JavaWeb_(Struts2框架)Struts创建Action的三种方式 传送门 JavaWeb_(Struts2框架)struts.xml核 ...
- SNOI2017炸弹
这个东西其实我是不太会的……但是勉强卡过去了. 首先肯定是建有向图,然后求每个节点能访问的节点个数,最裸的打法就是按照题意枚举建边然后tarjan缩点,用bitset记录一下访问节点,但是bitset ...
- python中的fstring的 !r,!a,!s
首先是fstring的结构 f ' <text> { <expression> <optional !s, !r, or !a> <optional : fo ...