return

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> <script> // return 返回值
// 数字、字符串、布尔、函数、对象(元素\[]\{}\null)、未定义 // fn1(); => 100
// alert( fn1().length );
// alert( typeof fn1() );
function fn1(){
// return 100;
return 'miaov';
} // alert( fn2() ); // fn2(20)(10);
function fn2(a){
return function (b){
alert(a+b); // 嘿嘿,我是注释~
};
} fn3().onload = function (){
document.body.innerHTML = 123;
}; function fn3(){
return window;
} // alert(fn4());
function fn4(){
// return ;
} // alert( fn5() );
function fn5(){
return 123; alert(520);
} /*
return:返回值
1) 函数名+括号:fn1() ==> return 后面的值;
2) 所有函数默认返回值:未定义;
3) return 后面任何代码都不执行了;
*/ </script> </head> <body>
</body>
</html>

2-getId()

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div { width:100px; height:100px; background:red; }
</style>
<script>
window.onload = function (){
// var oBtn = document.getElementById('btn1');
// var oDiv = document.getElementById('div1'); $('btn1').onclick = function (){
alert( $('div1').innerHTML );
};
};
function $( id ){
return document.getElementById( id );
}
</script>
</head> <body> <input id="btn1" type="button" value="按钮" />
<div id="div1">123</div> </body>
</html>

3-$符的简化版

miaov.js

// JavaScript Document

function $( v ){
if( typeof v === 'function' ){
window.onload = v;
} else if ( typeof v === 'string' ) {
return document.getElementById(v);
} else if ( typeof v === 'object' ) {
return v;
}
} function getStyle( obj, attr ){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="miaov.js"></script>
<script>
/*
$( function(){
$('#btn1').click(function(){
$(this).css('background', 'red');
});
});
*/ $(function(){
$('btn1').onclick = function(){
$( this ).style.background = 'yellow';
};
}); </script>
</head> <body> <input id="btn1" type="button" value="按钮" /> </body>
</html>

4-return应用

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> <script> // alert( fn1( 5 ) ); // [ 1,2,3,4,5 ]
// alert( fn1( 7 ) ); // [ 1,2,3,4,5,6,7 ] function fn1( n ){
var arr = [];
for( var i=1; i<=n; i++ ){
arr.push(i);
}
return arr;
} </script> </head> <body>
</body>
</html>

5-arguments

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> <script> fn1( 1,2,3 ); // 实参——实际传递的参数
// function fn1( a,b,c ){ // 形参——形式上,abc这些名代表123
function fn1(){
// arguments => [ 1,2,3 ] —— 实参的集合
// alert( arguments );
// alert( arguments.length );
// alert( arguments[arguments.length-1] );
} // 当函数的参数个数无法确定的时候:用 arguments
// alert( sum( 1,2,3 ) ); // 6
// alert( sum( 1,2,3,4 ) ); // 10
function sum (){
var n = 0;
for( var i=0; i<arguments.length; i++ ){
n += arguments[i];
}
return n;
} var a = 1;
function fn2( a ){
arguments[0] = 3;
alert(a); // 3
var a = 2;
alert( arguments[0] ); // 2
}
fn2(a);
alert(a); // 1 </script> </head> <body>
</body>
</html>

6-获取元素样式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div { width:100px; height:120px; background:red; }
</style>
<script src="miaov.js"></script>
<script>
$(function(){ // $('div1').style.width = '300px'; $('btn1').onclick = function (){
// alert( $('div1').style.width );
// $('div1').style.cssText = 'width:350px;'; // alert( getComputedStyle( $('div1') ).width ); // IE6 7 8 不兼容 // alert( $('div1').currentStyle.width ); // 标准浏览器不兼容
/*
if( $('div1').currentStyle ){
alert( $('div1').currentStyle.width );
} else {
alert( getComputedStyle( $('div1'), 250 ).width );
// FF 4.0 之前
}
*/ // alert( getStyle( $('div1'), 'width' ) );
// alert( getStyle( $('div1'), 'height' ) ); alert( getStyle( $('div1'), 'marginRight' ) ); /*
获取到的是计算机(浏览器)计算后的样式 background: url() red …… 复合样式(不要获取)
backgroundColor 单一样式(不要用来做判断) 不要有空格 不要获取未设置后的样式:不兼容
*/
};
}); </script>
</head> <body> <input id="btn1" type="button" value="按钮" />
<div id="div1"></div> </body>
</html>

7-定时器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> <script>
/*
定时器:时间概念
var timer = setInterval( 函数, 毫秒 ); 重复执行(发动机)
clearInterval( timer ); 清除 var timer = setTimeout( 函数, 毫秒 ); 执行一次(炸弹)
clearTimeout( timer );
*/ // for(var i=0; i<3; i++){ document.title = i; } // 瞬间完成,没有时间根据 i = 0; var timer = null; function fn1(){
i++;
document.title = i; if( i === 10 ){
clearInterval( timer );
}
}
timer = setInterval( fn1, 200 );
// fn1(); // 直接调用
// document.onclick = fn1; // 事件调用
</script> </head> <body>
</body>
</html>

8-替换背景

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head> <body> <input type="button" value="换背景吧" />
<input type="button" value="停" /> <script>
var aBtn = document.getElementsByTagName('input');
var arrUrl = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
var num = 0;
var timer = null; var oBody = document.body; aBtn[0].onclick = function (){ clearInterval( timer ); // null、未定义 timer = setInterval(function(){
oBody.style.background = 'url('+ arrUrl[num] +')';
num++;
num%=arrUrl.length;
}, 1000);
};
aBtn[1].onclick = function (){
clearInterval( timer );
}; // oBody.style.background = 'url('+ arrUrl[num] +')'; </script> </body>
</html>

广告案例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body { background:url(img/sina.jpg) no-repeat center 0; text-align:center; }
img { display:none; }
</style>
<script>
window.onload = function (){
var miaov = document.getElementById('miaov'); setTimeout( function(){
miaov.style.display = 'inline-block'; setTimeout(function(){
miaov.style.display = 'none';
}, 3000); }, 2000);
};
</script>
</head> <body> <img id="miaov" src="img/miaov.jpg" /> </body>
</html>

10-图片自动切换实例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333; }
#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }
#pic img { width:400px; height:500px; }
#pic ul { width:40px; position:absolute; top:0; right:-50px; }
#pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
#pic .active { background:#FC3; }
#pic span { top:0; }
#pic p { bottom:0; margin:0; }
#pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>
<script>
window.onload = function (){
var oDiv = document.getElementById('pic');
var oImg = oDiv.getElementsByTagName('img')[0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oP = oDiv.getElementsByTagName('p')[0];
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li'); var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
var num = 0; //////////////////////////////////////////////////////////////////////// var timer = null; function autoPlay(){
timer = setInterval(function(){
num++;
num%=arrText.length;
fnTab();
}, 1000);
}
// autoPlay(); setTimeout( autoPlay, 2000 ); oDiv.onmouseover = function (){
clearTimeout( timer );
};
oDiv.onmouseout = autoPlay; //////////////////////////////////////////////////////////////////////// for( var i=0; i<arrUrl.length; i++ ){
oUl.innerHTML += '<li></li>';
} // 初始化
function fnTab(){
oImg.src = arrUrl[num];
oSpan.innerHTML = 1+num+' / '+arrUrl.length;
oP.innerHTML = arrText[num];
for( var i=0; i<aLi.length; i++ ){
aLi[i].className = '';
}
aLi[num].className = 'active';
}
fnTab(); for( var i=0; i<aLi.length; i++ ){
aLi[i].index = i; // 索引值
aLi[i].onclick = function (){
num = this.index;
fnTab();
};
}
};
</script>
</head> <body> <div id="pic">
<img src="" />
<span>数量正在加载中……</span>
<p>文字说明正在加载中……</p>
<ul></ul>
</div> </body>
</html>

11-setTimeout实例-模仿qq查看资料效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> <style>
#qq { width:200px; height:400px; background:#F9C; }
#title { width:240px; height:180px; background:#FC6; position:absolute; top:10px; left:220px; display:none; }
</style>
<script src="miaov.js"></script>
<script>
$(function(){
var qq = $('qq');
var title = $('title');
var timer = null; qq.onmouseover = show;
qq.onmouseout = hide; title.onmouseover = show;
title.onmouseout = hide; function show(){
clearInterval( timer );
title.style.display = 'block';
}
function hide(){
timer = setTimeout(function(){
title.style.display = 'none';
}, 200);
}
});
</script>
</head> <body> <div id="qq"></div>
<div id="title"></div> </body>
</html>

javascript-初级-day08的更多相关文章

  1. JavaScript初级面试题

    前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型: ...

  2. Javascript初级学习总结

    首先,在Html页面输出,使用document.write('内容'); <html> <head> <title></title> <scrip ...

  3. 妙味课堂:JavaScript初级--第11课:字符串、查找高亮显示

    1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...

  4. FCC的javascript初级算法题解答

    FCC上的javascript基础算法题 前一阵子做的基础算法题,感觉做完后收获还蛮大的,现在将自己的做法总结出来,供大家参考讨论.基本上做到尽量简短有效,但有些算法还可以继续简化,比如第七题若采用正 ...

  5. JavaScript初级学习

    1. JavaScript的介绍 前身是LiveScript+JavaScript JavaScript(js)是一个脚本语言 基于浏览器的脚本语言 基于对象,面向对象的一个编程语言 2. EcmaS ...

  6. 关于JavaScript初级的知识点一(持续更新 )

    自己刚开始接触JS这是自己一个多月以来的一些总结和回顾. 一.什么是js? js是一种弱类型的脚本语言,是HTML的3大组成部分之一.HTML标签 CSS样式 JS脚本. 二.js的5种基本数据类型 ...

  7. JavaScript初级教程(Jquery)

    序,学习前端页面编程技术,JS是不得不学的一门技术,目前JS不仅可以作为前端编程语言,在服务器端也有了一定发展,例如NodeJS.废话不多书,本篇博客主要介绍JS作为前端语言,怎样获得和改变HTML标 ...

  8. 妙味课堂:JavaScript初级--第12课:json与数组

    1.json数据格式及json语法 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  9. 151003-动起来-Javascript

    Hi 玩了三天了,下午一会儿还有电影,心快收不回来了...不过,竟然无聊到想学习,你敢信? 下个规矩吧,以后每天早上起来在这里写东西,至少也得是个hi,或者以后都以这个为开头好了,算是个个人标志?申请 ...

  10. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

随机推荐

  1. bash手册

    目录 bash手册 man命令 man man 分页程序(page) Linux手册页惯用的节名 Linux手册页的内容区域 查看命令在Linux手册页中的区域 info页面 help帮助 bash手 ...

  2. 从 MVC 到使用 ASP.NET Core 6.0 的最小 API

    从 MVC 到使用 ASP.NET Core 6.0 的最小 API https://benfoster.io/blog/mvc-to-minimal-apis-aspnet-6/ 2007 年,随着 ...

  3. 力扣 - 剑指 Offer 45. 把数组排成最小的数

    题目 剑指 Offer 45. 把数组排成最小的数 思路1 将整数数组转化成字符串数组 然后使用Arrays工具类的sort方法帮助我们排序 代码 class Solution { public St ...

  4. UltraSoft - DDL Killer - Alpha 项目展示

    团队介绍 CookieLau fmh 王 FUJI LZH DZ Monster PM & 后端 前端 前端 前端 后端 后端 软件介绍 项目简介 项目名称:DDLKiller 项目描述:&q ...

  5. [对对子队]会议记录4.17(Scrum Meeting8)

    今天已完成的工作 何瑞 ​ 工作内容:修复了一些bug,优化了UI ​ 相关issue:搭建关卡1 ​ 相关签入:4.17签入1 吴昭邦 ​ 工作内容:做了一些流水线系统的错误处理,添加了合成失败了之 ...

  6. STM32 PWM功能在关闭时GPIO电平不确定的情况

    刚开始接触STM32,遇到一个项目中出现在产品调试中出现在关闭PWM输出时,GPIO电平有不确定的情况.在网上查阅资料发现大神们是这样解释的:PWM在一个脉冲没有结束时关闭输出,会导致GPIO电平不确 ...

  7. golang常用库:cli命令行/应用程序生成工具-cobra使用

    golang常用库:cli命令行/应用程序生成工具-cobra使用 一.Cobra 介绍 我前面有一篇文章介绍了配置文件解析库 Viper 的使用,这篇介绍 Cobra 的使用,你猜的没错,这 2 个 ...

  8. 基于屏幕空间的实时全局光照(Real-time Global Illumination Based On Screen Space)

    目录 Reflective Shadow Maps(RSM) RSM 的重要性采样 RSM 的应用与缺陷 Screen Space Ambient Occulsion(SSAO) SSAO Blur ...

  9. Python matplotlib numpy 曼德尔布罗特集合 曼德尔布罗特 B.Madelbrot

    import numpy as np import matplotlib.pyplot as plt def mandelbrot(h,w,maxit=20): y,x = np.ogrid[-1.4 ...

  10. 第04课 OpenGL 旋转

    旋转: 在这一课里,我将教会你如何旋转三角形和四边形.左图中的三角形沿Y轴旋转,四边形沿着X轴旋转. 上一课中我教给您三角形和四边形的着色.这一课我将教您如何将这些彩色对象绕着坐标轴旋转.其实只需在上 ...