今天学习javascript第三课，没什么知识点，主要讲了一些案例，我觉的这几个案例很经典，和大家分享下
1.图片的自动切换
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
.image{
display:block;
}
.div{
position:absolute;
top:156px;
left:312px;;
}
</style>
</head>
<body onload="change()">
<image src="images/1.png" id="img1" class="image"></image>
<image src="images/2.jpg" id="img2" class="image"></image>
<image src="images/3.jpg" id="img3" class="image"></image>
<image src="images/4.jpg" id="img4" class="image"></image>
<image src="images/5.png" id="img5" class="image"></image>
<div class="div">
<input type="button" value="1" onmouseover="choose('1')" onmouseout="leave()"/>
<input type="button" value="2" onmouseover="choose('2')" onmouseout="leave()"/>
<input type="button" value="3" onmouseover="choose('3')" onmouseout="leave()"/>
<input type="button" value="4" onmouseover="choose('4')" onmouseout="leave()"/>
<input type="button" value="5" onmouseover="choose('5')" onmouseout="leave()"/>
</div>
<script type="text/javascript">
var now=1;
var st;
function change(){
for(var i=1;i<=5;i++){
document.getElementById("img"+i).style.display="none";
}
document.getElementById("img"+now).style.display="block";
if(now<5){
now++;
}else{
now=1;
}
st=setTimeout("change()",1000);
}
function choose(arg){
clearTimeout(st);
now=arg;
for(var i=1;i<=5;i++){
document.getElementById("img"+i).style.display="none";
}
document.getElementById("img"+now).style.display="block";
}
function leave(){
change();
}
</script>
</body>
</html>
2.复选框效果
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body onload="check()">
<input type="checkbox" name="father" id="father" />
<input type="button" value="反选" id="fanxuan"/>
<hr />
<input type="checkbox" name="son" id="son1" />
<input type="checkbox" name="son" id="son2" />
<input type="checkbox" name="son" id="son3" />
<input type="checkbox" name="son" id="son4" />
<input type="checkbox" name="son" id="son5" />
<script type="text/javascript">
var sons=document.getElementsByName("son");
document.getElementById("father").onclick=function(){
for(var i=0;i<sons.length;i++){
sons[i].checked=this.checked;
}
}
document.getElementById("fanxuan").onclick=function(){
for(var i=0;i<sons.length;i++){
sons[i].checked=!sons[i].checked;
}
}
function check(){
for(var i=0;i<sons.length;i++){
if(!sons[i].checked){
document.getElementById("father").checked=false;
break;
}
}
if(sons[1].checked&&sons[2].checked&&sons[3].checked&&sons[4].checked&&sons[0].checked){
document.getElementById("father").checked=true;
}
setTimeout("check()",10);
}
</script>
</body>
</html>
3.选项可效果
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
body,.down{
margin:0px;
padding:0px;
}
.news,.sports,.tech{
display:inline;
float:left;
font-size:83px;
}
.clear{
clear:both;
}
#news,#new{
background-color:#FF7400;
}
#sports,#sport{
background-color:red;
}
#tech,#tec{
background-color:blue;
}
.down{
width:500px;
height:500px;
}
</style>
</head>
<body onload="slide('news')">
<div class="news" id="new" onmouseover="slide('news')">新闻</div>
<div class="sports" id="sport" onmouseover="slide('sports')">体育</div>
<div class="tech" id="tec" onmouseover="slide('tech')">科技</div>
<div class="clear"></div>
<div class="down" id="news" name="con">
新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻
</div>
<div class="down" id="sports" name="con">
体育体育体育体育体育体育体育体育体育体育体育体育体育
</div>
<div class="down" id="tech" name="con">
科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技
</div>
<script type="text/javascript">
function slide(arg){
var downs=document.getElementsByName("con");
for(var i=0;i<downs.length;i++){
downs[i].style.display="none";
}
document.getElementById(arg).style.display="block";
}
</script>
</body>
</html>
4.进度条效果
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#div{
width:300px;
height:20px;
background-color:#FF7400;
}
</style>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
go();
var i=1;
var count=1;
function go(){
document.getElementById("div").style.width=i+"px";
if(count%2==1){
i++;
}else{
i--;
}
if(i>200||i<1){
count++;
}
setTimeout("go()",10);
}
</script>
</body>
</html>
主意：
getElementById返回的是一个结果，但是getElementsByName和getElementsByTagName返回的是许多结果
最后附上以上例子的文件
分享到：
相关推荐
在本节"黑鹰JavaScript培训教程第三十九课"中，我们将深入探讨JavaScript这门强大的编程语言，特别是关于JavaScript的核心概念和应用。JavaScript是Web开发中不可或缺的一部分，它为网页提供了动态交互性，使得用户...
本课件“javaScript课件第5课”延续了第4课的深入浅出讲解风格，旨在帮助初学者更好地掌握JavaScript的核心概念和技术。 在JavaScript实例部分，你将学习到如何将理论知识应用到实际项目中。JavaScript的实例化是...
在本课程“精通JavaScript+jQuery第8课”中，我们将深入探讨JavaScript这门强大的脚本语言及其与jQuery库的结合应用。JavaScript，作为Web开发的基础，是实现网页动态交互的关键，而jQuery则以其简洁易用的API大大...
第3课 第一页 Javascript高级教程 - 第三日 第二页 如何给事件定时 第三页 定时循环的概念 第四页 定时循环的做法 第五页 一个Javascript编写的时钟 第六页 给定时器加入变量 第七页 识别用户的浏览器 第八...
本教程主要涵盖JavaScript的第一章，基础语法部分的1~3节，旨在帮助初学者快速理解并掌握JavaScript的基本用法。 首先，JavaScript是一种解释型的、基于原型的、弱类型的脚本语言。它的基本语法包括变量声明、数据...
第3课 - CSS基础 - [精通JavaScript+jQuery] 第4课 - CSS进阶 - [精通JavaScript+jQuery] 第5课 - DOM模型 - [精通JavaScript+jQuery] JavaScript开发进阶 第6课 - JavaScript事件 - [精通JavaScript+jQuery] ...
**第3课：数组与字符串操作** - 数组的创建、遍历和操作方法（push、pop、shift、unshift、splice等） - 字符串的基本操作（拼接、查找、替换、截取） - 正则表达式的基础知识，用于字符串的验证和处理 **第4课：...
在"JavaScript第一课"中，我们将初步了解JavaScript的基础知识，主要涵盖三个方面：如何在网页中插入JavaScript、JavaScript的数据类型以及JavaScript的三个基本对话框。首先，让我们详细探讨如何在HTML页面中添加...
JavaScript编程起步第四课主要讲解了两个关键概念：for循环和数据类型转换。在JavaScript中，循环是程序控制流程的重要部分，而for循环是最常见的循环结构之一。它通过初始化表达式、条件判断和更新表达式来控制循环...
通过本节课总结，我们将对 HTML5、CSS3 和 JavaScript 等 web 前端知识有更深入的理解和认识。我们将了解到 HTML5 的新特性和改进、JavaScript 的脚本语言特点和应用、CSS3 的网页排版技术和样式设计等。 八、学完...
第3课 JavaScript函数 掌握函数的使用，学习函数的封装，体会代码复用的过程和它带来的便利 第二阶段: JavaScript DOM和BOM 第1课 JavaScript内置对象 学习内置对象的常用属性和方法，方便我们开发中直接调用，...
Experienced JavaScript programmers know that code reuse is good. Experienced JavaScript programmers also know that JavaScript functions are data types. So, we should be able to store a JavaScript ...
函数的调用方式是`calculation(2, 3)`，这将返回它们的乘积。 将JavaScript与HTML结合，可以利用DOM（Document Object Model）操作网页元素，如改变文本、样式或响应用户事件。例如，当用户点击按钮时，JavaScript...
### JavaScript编程起步（第四课）知识点详解 #### 一、课程概述 本次课程主要介绍了JavaScript中的两种重要概念：循环结构和数据类型。其中重点讲解了`for`循环以及`for...in`循环，并且深入探讨了JavaScript中...
在"ACCP5.0 S2 javascript理论课作业答案"中，学员将接触到JavaScript的基础知识和进阶特性。这包括但不限于以下内容： 1. **基础语法**：学习变量、数据类型（如字符串、数字、布尔值、null、undefined、对象、...
第1课 第一页 Javascript高级教程 第二页 本教程的课程计划 第三页 一个if-then-else的快捷方式 第四页 什么是变量 第五页 变量的使用方法 第2课 第一页 Javascript高级教程-第2日 ...第3课 ..................
3. 第三章：JavaScript面向对象编程 - 理解JavaScript语言特性，如原型链、闭包。 - 掌握面向对象编程的概念，实现类和对象。 - 学习设计模式在JavaScript中的应用。 4. 第四章：正则表达式 - 了解正则表达式的...
JavaScript是网页开发中不可或缺的一部分，它提供了丰富的功能来操作页面元素和处理用户交互。本篇内容主要涵盖了JavaScript的基础知识，包括变量声明、类型转换、数组、循环语句、自定义函数以及内置对象如String、...