第五章 JS典型特效
注意：
1、JS在HTML中从上到下依次执行，所以获取元素的结果与JS的位置有关
<!DOCTYPE html>
<html>
<head>
<title>获取元素</title>
//外部JS警告框弹出的是【null】
<script type="text/javascript" src="js/index.js"></script>
//警告框弹出的是【null】
<script type="text/javascript">
alert(document.getElementById("my"));
</script>
</head>
<body>
<div id="my">haha</div>
//警告框弹出的是【object HTMLDivElement】
<script type="text/javascript">
alert(document.getElementById("my"));
</script>
</body>
</html>
注：解决方法（1）将JS放到网页文档末尾（2）使用window.onload=initi;当文档加载完成时再运行JS的函数initi【此时函数使用时只用函数名，不要小括号】。
JS完成特效
1、 时钟特效
window.onload=initi; //给文档加载完成事件绑定名叫initi的函数
function initi(){
setInterval("getTime()",10); //每隔1000毫秒执行一次getTime()函数
}
function getTime(){
//1.获取元素
var timeDiv=document.getElementById("my");
//2.累加时间
var today=new Date(); //定义时间对象
var tStr=""; //定义时间字符串
tStr+=today.getFullYear()+"年";
tStr+=(today.getMonth()+1)+"月";
tStr+=today.getDate()+"日";
tStr+=today.getHours()+"时";
tStr+=today.getMinutes()+"分";
tStr+=today.getSeconds()+"秒";
//3.修改元素
timeDiv.innerHTML=tStr; //将时间字符串丢到Div中
}
2、弹出窗口特效——病毒页面效果——每隔5s跳出页面
function opens(){
window.open("https://123.sogou.com/",""," width=250, height=265,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0");
}
var t=setInterval("opens()",5000);
1、 Tab切换——使用数组和循环完成Tab切换
// JavaScript Document
//定义三个按钮
var btns=new Array();
//定义三个内容
var contents=new Array();
//文档加载完成做事情
window.onload=function(){
//取出所有div
var divs=document.getElementsByTagName("div");
var i=0;//按钮的下标
var j=0;//内容的下标，下标从0开始
for(var k=0;k<divs.length;k++){
//根据div块的className将不同的div存入相应的数组中
if(divs[k].className=="btnTab"){
//如果class的值和按钮的class一致就存入
btns[i]=divs[k];
i++;//让下标连续
/*
两句可以写作
btns[i++]=divs[ks];
*/
}
if(divs[k].className=="contentTab"){
//如果class的值和按钮的class一致就存入
contents[j]=divs[k];
j++;//让下标连续
}
}
for(var t=0;t<btns.length;t++){
bangd(t);//循环每个按钮，绑定函数
}
//使用循环进行事件绑定
function bangd(temp){
//给第i个按钮绑定单击事件
btns[temp].onclick=function(){
for(var m=0;m<contents.length;m++){
if(m==temp){
contents[m].style.display="block";
}else{
contents[i].style.display="none";
}
}
}
}
}
2、 全选和反选
a) 全选
//文档加载完成时，绑定匿名函数
window.onload=function(){
//通过id获取全选复选框
var checkAll=document.getElementById("checkAll");
//根据name取复选框，返回对象数组
var hobby=document.getElementsByName("hobby");
//给全选按钮绑定单击事件，事件是一个匿名函数，函数可以嵌套
checkAll.onclick=function(){
//this关键字，指的是当前正在运行时的对象
/*
if(this.checked==true){//全选被选中
for(var i=0;i<hobby.length;i++){
//使用循环选中所有按钮
hobby[i].checked==true;
}
}else{//否则，所有按钮都不被选中
for(var i=0;i<hobby.length;i++){
hobby[i].checked==false;
}
}
*/
//优化代码【this指的是全选复选框，给所有爱好赋上全选框的值】
for(var i=0;i<hobby.length;i++){
hobby[i].checked==this.checked;
}
}
}
b) 反选
//文档加载完成时，绑定匿名函数
window.onload=function(){
//通过id获取全选复选框
var checkFan=document.getElementById("checkFan");
//根据name取复选框，返回对象数组
var hobby=document.getElementsByName("hobby");
//给反选按钮绑定单击事件，事件是一个匿名函数，函数可以嵌套
checkFan.onclick=function(){
for(var i=0;i<hobby.length;i++){
hobby[i].checked=!hobby[i].checked;
//循环每一个复选框，值为自己的相反值
}
}
}
3、 表格的增删改查
…………………………………未完待续，我先睡了有时间再发………………………
第五章 JS典型特效的更多相关文章
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- 读JS高级——第五章-引用类型 _记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素
D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...
- JS复习第五章
第五章 引用类型 一.Object类型 创建object实例的方式有两种. 第一种是使用new操作符后跟object构造函数,如下所示: ver person = new Object( ) ; pe ...
- [书籍翻译] 《JavaScript并发编程》第五章 使用Web Workers
本文是我翻译<JavaScript Concurrency>书籍的第五章 使用Web Workers,该书主要以Promises.Generator.Web workers等技术来讲解Ja ...
- 精通Web Analytics 2.0 （7） 第五章：荣耀之钥：度量成功
精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第五章:荣耀之钥:度量成功 我们的分析师常常得不到我们应得的喜欢,尊重和资金,因为我们没有充分地衡量一个黄金概念:成果.因为我们 ...
- 读《编写可维护的JavaScript》第五章总结
第五章 UI层的松耦合 5.1 什么是松耦合 在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的: HTML是用来定义页面的数据和语义 CSS用来给页面添加样式 JavaScript用来给页 ...
- Google V8编程详解（五）JS调用C++
http://blog.csdn.net/feiyinzilgd/article/details/8453230 最近由于忙着解决个人单身的问题,时隔这么久才更新第五章. 上一章主要讲了Google ...
- 《学习OpenCV》练习题第五章第一题ab
这道题是载入一幅带有有趣纹理的图像并用不同的模板(窗口,核)大小做高斯模糊(高斯平滑),然后比较用5*5大小的窗口平滑图像两次和用11*11大小的窗口平滑图像一次是否接近相同. 先说下我的做法,a部分 ...
随机推荐
- Spark性能优化指南——基础篇
本文转自:http://tech.meituan.com/spark-tuning-basic.html 感谢原作者 前言 在大数据计算领域,Spark已经成为了越来越流行.越来越受欢迎的计算平台之一 ...
- libGDX开发环境搭建-Android Studio 最新版
http://blog.csdn.net/renwuqiangg/article/details/53088720 —————————————————————————————————————————— ...
- linux技巧---为各应用创建快捷方式
linux中启动或关闭应用有时候比较麻烦,你必须cd到该应用的可执行脚本的目录中再执行该脚本,不能在任意目录下开启或关闭应用..当然,设置了环境变量path可以解决在任意目录下开启应用的问题,但是每个 ...
- [springBoot系列]--springBoot注解大全[转]
一.注解(annotations)列表 @SpringBootApplication:包含了@ComponentScan.@Configuration和@EnableAutoConfiguration ...
- 24小时学通Linux内核之电源开和关时都发生了什么
说实话感觉自己快写不下去了,其一是有些勉强跟不上来,其二是感觉自己越写越差,刚开始可能是新鲜感以及很多读者的鼓励,现在就是想快点完成自己制定的任务,不过总有几个读者给自己鼓励,很欣慰的事情,不多感慨了 ...
- count(1)、count(*)与count(列名)的执行区别
执行效果: 1. count(1) and count(*) 当表的数据量大些时,对表作分析之后,使用count(1)还要比使用count(*)用时多了! 从执行计划来看,count(1)和coun ...
- 远程连接服务器影像文件进行服务发布以及问题解决【the data item is inaccessible】
场景模拟: 本机安装有arcgis desktop以及arcgis server10.1,server的站点账号为arcgis. 需要发布影像服务并进行切片,使用的影像数据存放在远程服务器上,影像较大 ...
- 工具 - 怎么看微信h5的源码？
这个问题在我看网易的h5案例的时候萌生的.因为想看他的源码,但是手机微信打开肯定看不了. 以下几种看代码的方法:(页面案例用网易大大刷屏的h5<二零一六娱乐圈画卷>,真的是一个值得我等众生 ...
- 通俗讲解：PoW共识机制与以太坊的关系、Ghost协议 及 PoS共识机制的变种---Casper
作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...
- css的position中absolute和fixed的区别
fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...