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和 ...
随机推荐
- 关于上部盒子里有图片下面盒子magin-top负值的层级问题
.box{ width: 800px; box-sizing: border-box; margin: 50px auto 0; background: pink; } .imgBox{ width: ...
- 水果商城 ( Iview+ SSM + MySQL )
因为时间原因,只做了后台,前台本来是打算使用 uni 框架 的. 有文档.E-R流程图.数据库文件. 项目源码地址:https://github.com/oukele/MyProject-Two
- webpack编译sass报错找不到module /css-loader/index.js... || 安装node-sass报错
今天无论在家还是在公司,安装node-sass总是失败,或安装成功了,使用webpack编译sass报错,说找不到module,按照提示的错误我找了node_modules下的css-loader,发 ...
- 【WinForm-TreeView】实现Win7 Areo效果
效果图: 新建一个继承自TreeView的控件类,代码如下: using System; using System.Windows.Forms; using System.Drawing; using ...
- java+大文件上传+下载
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...
- tomcat使用jdbc连接mysql出现的错误
出现的错误:java.lang.ClassNotFoundException: com.mysql.jdbc.Driver 前提: 已经在工程的build path中添加了驱动包(mysql-conn ...
- K8S中的Job和CronJob
Job Job负责批量处理短暂的一次性任务 (short lived one-off tasks),即仅执行一次的任务,它保证批处理任务的一个或多个Pod成功结束. Kubernetes支持以下几种J ...
- BigDecimal的保留位数和四舍五入的方法
一 BigDecimal num = new BigDecimal("2.225667");//一般都会这样写最好 int count = num.scale(); System. ...
- django CBV模式源码执行过程
在说CBV模式之前,先看下FBV的url配置方式: urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^xxx/', login), ur ...
- git上传项目已经删除文件，但是Jenkins中没有删除
jenkins 缓存造成的,需要清理工作空间