DOM事件练习 II
select框联动效果
需求：当在textarea中输入内容，点击留言按钮，会添加到浏览器中，最新留言出现在最顶端。
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>select联动</title>
</head>
<body>
<select name="province" id="province">
<option value="0" selected>请选择省份</option>
</select>
<select name="city" id="city">
<option value="">请选择市</option>
</select>
</body>
<script type="text/javascript">
data = {"河北": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}
var select1 = document.getElementById('province');
for (i in data){
var option = document.createElement('option');
option.innerText = i;
select1.appendChild(option);
}
select1.onchange = function () {
var select2 = document.getElementById('city');
select2.innerText = null;
var choosed = select1.options[this.options.selectedIndex].innerText;
for (var i=0;i<data[choosed].length;i++){
var option = document.createElement('option');
option.value = i;
option.innerText = data[choosed][i];
select2.appendChild(option)
}
}
</script>
</html>
select框联动
简易留言板
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>简易留言板</title>
<style>
*{padding:0; margin: 0;}
.close{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;
background-color: rgba(0,0,0,.1);
margin-left: 20px;}
</style>
</head>
<body>
<h1>简易里留言板</h1>
<hr>
<div id="box">
</div>
<textarea id="msg" ></textarea>
<input type="button" id="btn" value="留言">
<button onclick="sum()">统计</button>
</body>
<script type="text/javascript">
//将ul表建添加到div#box标签中
var oul = document.createElement('ul'); //创建一个ul准备存放留言
var obox = document.getElementById('box');
obox.appendChild(oul);
var obtn = document.getElementById('btn');
var omsg = document.getElementById('msg');
//获取留言数量
var count = 0;
obtn.onclick = function () {
//点击留言按钮事件
//第一步：创建li标签
var oli = document.createElement('li');
//获取留言框内的内容
oli.innerHTML = omsg.value+"<span class='close'>x</span>";
//第二步：如果是第一条留言，直接加到ul里面
var olis = document.getElementsByTagName('li');
if (olis.length === 0){
oul.appendChild(oli);
count++;
}
else {
// 如果不是第一次留言，则插入到第一个Li的前面
oul.insertBefore(oli,olis[0]);
count++;
}
//添加完数据之后 清空textaera
omsg.value = '';
//点击x，删除当前的一条数据
//首先先获取所有的x
var ospans = document.getElementsByTagName('span');
//循环，对所有的x添加事件
for (var i=0; i< ospans.length;i++){
ospans[i].onclick = function () {
oul.removeChild(this.parentNode);
count--;
}
}
function sum() {
alter('一共发布了"+count+"条留言');
}
}
</script>
</html>
简易留言板
使用js模拟选择器中hover代码
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>使用js模拟选择器中hover代码解释</title>
<style>
button{margin:10px;width:100px;height:40px;cursor:pointer}
.current{background-color: darkgray}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>
var btn= document.getElementsByTagName("button");
for (var i=0;i<btn.length;i++)
{
//要为每一个按钮绑定事件，所以用到了for循环
btn[i].onmouseover = function () {
//【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btn.length;j++)
{
btn[j].className="";
}
this.className = "current";
}
}
//鼠标离开current时，还原背景色
for(var i=0;i<btn.length;i++){
btn[i].onmouseout = function () {
this.className ='';
}
}
</script>
</html>
鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的className置空，然后把(this)按钮的className设置为current，达到变色的效果。核心代码： //排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current";
使用js模拟hover效果
tab栏选项卡
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>tab栏选项卡</title>
<style>
*{padding:0;margin:0}
ul{list-style: none;}
#tab{width:480px;margin:20px auto;border: gray;}
ul{width:100%;overflow: hidden;}
ul li{float:left;width:160px;height:60px;line-height: 60px;text-align: center;
background: #cccccc;}
ul li a{text-decoration: none;color:black}
li.active{background-color: gray;}
p{display: none;height:200px;text-align: center;line-height: 200px;background-color: lightyellow}
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>
window.onload=function () {
//需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类);
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的盒子。
var tabli = document.getElementsByTagName('li');
var tabcontent = document.getElementsByTagName('p');
for (var i=0;i<tabli.length;i++)
{// 绑定索引值（新增一个自定义属性：index属性）
tabli[i].index = i;
tabli[i].onclick= function () {
// 1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for (var j=0;j<tabli.length;j++)
{
tabli[j].className='';
tabcontent[j].className='';
}
this.className = 'active';
tabcontent[this.index].className = 'active';
} }
}
</script>
</html>
tab选项卡
购物车案例
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>购物车案例</title>
<style>
*{padding: 0;margin: 0;}
.box{width: 500px;height: 400px;margin: 100px auto;
background-color: rgba(255,255,255,0.4);position: relative;}
.car{ width: 150px; height: 30px;background-color: #fff;padding-left: 30px;text-align: center;
position: absolute;left: 130px;top: 3px;z-index: 3;border: 1px solid green;line-height: 30px}
.shop{width: 310px;height: 200px;background-color: #fff;position: absolute;
top:33px;left: 0;display: none;}
div.c{border-bottom-width: 0;}
div.t{ border: 1px solid green;}
</style>
</head>
<body>
<div class="box">
<div class="car" id="mycar">我的购物车</div>
<div class="shop t" id="shop"></div>
</div>
</body>
<script>
var myCar = document.getElementById('mycar');
var shop = document.getElementById('shop');
mycar.onmouseover=function () {
shop.style.display = 'block';
myCar.className += ' c'; //c前边的空格不能省略，要凑成 'car c'的结构
};
myCar.onmouseout = function () {
shop.style.display = 'none';
myCar.removeAttribute('class');
myCar.className = 'car';
}
</script>
</html>
购物车点击显现简易实现
字体随即变色
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>字体随机变色</title>
</head>
<body>
<div>
<span id="content">春天在哪里呀，春天在哪里，春天在那小朋友的眼睛里</span>
</div>
</body>
<script>
setInterval(f,1000); //重复运行
function f() {
var content = document.getElementById('content');
var color = parseInt(Math.ceil(Math.random()*16777216),16) ;
//parseInt() 函数可解析一个字符串，并返回一个整数
content.style.color = '#'+color
}
</script>
</html>
字体随机改变颜色
计时器模拟
<!doctype html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计时器案例</title>
<style>
div span{display:inline-block; height:150px;line-height: 150px;font-size: 50px}
.num{background-color: darkgray;width: 100px;text-align: center;border-radius: 10px}
.btn{padding:20px;text-align: center}
</style>
</head>
<body>
<div>
<div>
<span class="num" id="hour0">0</span>
<span class="num" id="hour1">0</span>
<span>:</span>
<span class="num" id="min0">0</span>
<span class="num" id="min1">0</span>
<span>:</span>
<span class="num" id="sec0">0</span>
<span class="num" id="sec1">0</span>
</div>
<div class="btn">
<button id = "start" >开始</button>
<button id = "stop" >停止</button>
<button id = "reset" >重置</button>
</div>
</div>
</body>
<script>
var start = document.getElementById('start');
var stop = document.getElementById('stop');
var reset = document.getElementById('reset');
start.onclick = function () {
interval = setInterval('change_bar("sec",6)',1000);
};
function change_bar(idval,maxval) {
var s1 = document.getElementById(idval+'1');
var s1_value = parseInt(s1.innerText);
s1_value++;
if(s1_value === 10){
s1_value = 0;
var s0 = document.getElementById(idval+'0');
var s0_value = parseInt(s0.innerText);
s0_value ++;
if (s0_value === maxval)
{
s0_value = 0;
if(idval === 'sec')
{change_bar('min',6);}
else if (idval === 'min')
{change_bar('hour',10)}
}
s0.innerText=s0_value;
}
s1.innerText = s1_value;
}
stop.onclick = function () {
clearInterval(interval);
} ;
reset.onclick = function () {
clearInterval(interval);
var spans = document.getElementsByClassName('num');
for (var i=0;i<spans.length;i++)
{
spans[i].innerText = '0';
}
}
</script>
</html>
模拟计时器
DOM事件练习 II的更多相关文章
- DOM事件简介－－摘自admin10000
Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对象模型)事件列表的一部分.事件可以在文档(Document)结构的任何部 ...
- 【转】DOM事件简介
原文转自:http://blog.jobbole.com/52430/ Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对 ...
- DOM事件简介
DOM事件简介--摘自ADMIN10000 Posted on 2013-12-05 09:32 ziran 阅读(76) 评论(1) 编辑 收藏 Click.touch.load.drag.chan ...
- DOM事件模型浅析
1.何为DOM DOM是"Document Object Model"的缩写,中文译为"文档对象模型".它是一种跨平台.跨语言的编程接口,将HTML,XHTML ...
- 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和 ...
随机推荐
- mysql中给查询结果添加序号列
今天同事给了一个小需求,从一个存有不定数量坐标数据的表(map_trace)中每隔20条取一条.最后写了下面这条SQL: select * from (select @n:=@n+1 as n, a. ...
- 集成 jpush
给 iOS 应用添加推送功能是一件比较麻烦的事情,本篇文章收集了集成 jpush-react-native 的常见问题,目的是为了帮助用户更好地排查问题 1. 收不到推送 确保是在真机上测试,而不是在 ...
- 使用 Drag and Drop 给Web应用提升交互体验
什么是 Drag and Drop (拖放)? 简单来说,HTML5 提供了 Drag and Drop API,允许用户用鼠标选中一个可拖动元素,移动鼠标拖放到一个可放置到元素的过程. 我相信每个人 ...
- 微信小程序aes前后端加密解密交互
aes前后端加密解密交互 小程序端 1. 首先引入aes.js /** * [description] CryptoJS v3.1.2 * [description] zhuangzhudada so ...
- Linux 常用命令备忘
安装wget 方便联网下载: centos : sudo yum -y install wget 安装vim : yum -y install vim* set nu ...
- keras手写数字识别
import kerasimport timefrom keras.utils import np_utils start = time.time()(x_train, y_train), (x_te ...
- Java进阶知识04 Struts2的基础配置详解
1.Struts2的原理/流程步骤 简单的理解: 1.客户端发送一个request请求,Tomcat服务器接收到的请求经过web.xml配置文件去处理,进入struts2的核心过滤器,从而进入s ...
- c++回溯法求组合问题（取数，选取问题）从n个元素中选出m个的回溯算法
假如现在有n个数,分别从里面选择m个出来,那么一共有多少种不同的组合呢,分别是哪些呢? 利用计算机的计算力,采用回溯算法很容易求解 程序源代码如下: #include<iostream># ...
- sh_14_字符串定义和遍历
sh_14_字符串定义和遍历 str1 = "hello python" str2 = '我的外号是"大西瓜"' print(str2) print(str1[ ...
- BOM基础笔记
BOM基础 BOM对浏览器的一些操作 1.打开.关闭窗口 •open –蓝色理想运行代码功能 window.open('http://www.baidu.com/', '_self'); <!d ...