javascript-初级-day08
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的更多相关文章
- JavaScript初级面试题
前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型: ...
- Javascript初级学习总结
首先,在Html页面输出,使用document.write('内容'); <html> <head> <title></title> <scrip ...
- 妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
- FCC的javascript初级算法题解答
FCC上的javascript基础算法题 前一阵子做的基础算法题,感觉做完后收获还蛮大的,现在将自己的做法总结出来,供大家参考讨论.基本上做到尽量简短有效,但有些算法还可以继续简化,比如第七题若采用正 ...
- JavaScript初级学习
1. JavaScript的介绍 前身是LiveScript+JavaScript JavaScript(js)是一个脚本语言 基于浏览器的脚本语言 基于对象,面向对象的一个编程语言 2. EcmaS ...
- 关于JavaScript初级的知识点一（持续更新 ）
自己刚开始接触JS这是自己一个多月以来的一些总结和回顾. 一.什么是js? js是一种弱类型的脚本语言,是HTML的3大组成部分之一.HTML标签 CSS样式 JS脚本. 二.js的5种基本数据类型 ...
- JavaScript初级教程（Jquery）
序,学习前端页面编程技术,JS是不得不学的一门技术,目前JS不仅可以作为前端编程语言,在服务器端也有了一定发展,例如NodeJS.废话不多书,本篇博客主要介绍JS作为前端语言,怎样获得和改变HTML标 ...
- 妙味课堂:JavaScript初级--第12课：json与数组
1.json数据格式及json语法 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 151003-动起来-Javascript
Hi 玩了三天了,下午一会儿还有电影,心快收不回来了...不过,竟然无聊到想学习,你敢信? 下个规矩吧,以后每天早上起来在这里写东西,至少也得是个hi,或者以后都以这个为开头好了,算是个个人标志?申请 ...
- javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果
最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...
随机推荐
- bash手册
目录 bash手册 man命令 man man 分页程序(page) Linux手册页惯用的节名 Linux手册页的内容区域 查看命令在Linux手册页中的区域 info页面 help帮助 bash手 ...
- 从 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 年,随着 ...
- 力扣 - 剑指 Offer 45. 把数组排成最小的数
题目 剑指 Offer 45. 把数组排成最小的数 思路1 将整数数组转化成字符串数组 然后使用Arrays工具类的sort方法帮助我们排序 代码 class Solution { public St ...
- UltraSoft - DDL Killer - Alpha 项目展示
团队介绍 CookieLau fmh 王 FUJI LZH DZ Monster PM & 后端 前端 前端 前端 后端 后端 软件介绍 项目简介 项目名称:DDLKiller 项目描述:&q ...
- [对对子队]会议记录4.17(Scrum Meeting8)
今天已完成的工作 何瑞 工作内容:修复了一些bug,优化了UI 相关issue:搭建关卡1 相关签入:4.17签入1 吴昭邦 工作内容:做了一些流水线系统的错误处理,添加了合成失败了之 ...
- STM32 PWM功能在关闭时GPIO电平不确定的情况
刚开始接触STM32,遇到一个项目中出现在产品调试中出现在关闭PWM输出时,GPIO电平有不确定的情况.在网上查阅资料发现大神们是这样解释的:PWM在一个脉冲没有结束时关闭输出,会导致GPIO电平不确 ...
- golang常用库：cli命令行/应用程序生成工具-cobra使用
golang常用库:cli命令行/应用程序生成工具-cobra使用 一.Cobra 介绍 我前面有一篇文章介绍了配置文件解析库 Viper 的使用,这篇介绍 Cobra 的使用,你猜的没错,这 2 个 ...
- 基于屏幕空间的实时全局光照（Real-time Global Illumination Based On Screen Space）
目录 Reflective Shadow Maps(RSM) RSM 的重要性采样 RSM 的应用与缺陷 Screen Space Ambient Occulsion(SSAO) SSAO Blur ...
- 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 ...
- 第04课 OpenGL 旋转
旋转: 在这一课里,我将教会你如何旋转三角形和四边形.左图中的三角形沿Y轴旋转,四边形沿着X轴旋转. 上一课中我教给您三角形和四边形的着色.这一课我将教您如何将这些彩色对象绕着坐标轴旋转.其实只需在上 ...