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 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...
随机推荐
- 【分享】 一款自用的Anki卡片模板：黄子涵单词卡片 v1
[分享] 一款自用的Anki卡片模板:黄子涵单词卡片 v1 说明 第一代的功能 主要有两部分组成:英文和含义,目前主要是为自己记忆Web前端一些常用的单词而服务 有美美哒背景图,本来想修改为随机背景图 ...
- DataX的安装及使用
DataX的安装及使用 目录 DataX的安装及使用 DataX的安装 DataX的使用 stream2stream 编写配置文件stream2stream.json 执行同步任务 执行结果 mysq ...
- [Java]Sevlet
0 前言 对于Java程序员而言,Web服务器(如Tomcat)是后端开发绕不过去的坎.简单来看,浏览器发送HTTP请求给服务器,服务器处理后发送HTTP响应给浏览器. Web服务器负责对请求进行处理 ...
- kivy Label标记文本
from kivy.app import App from kivy.uix.boxlayout import BoxLayout from kivy.lang import Builder # 注意 ...
- Noip模拟80 2021.10.18
预计得分:5 实际得分:140?????????????? T1 邻面合并 我考场上没切掉的大水题....(证明我旁边的cty切掉了,并觉得很水) 然而贪心拿了六十,离谱,成功做到上一篇博客说的有勇气 ...
- 数列极限计算中运用皮亚诺Taylor展开巧解
这是讲义里比较精华的几个题目,今晚翻看也是想到了,总结出来(处理k/n2形式). 推广式子如下: 例题如下:
- 转：BeanFactory和FactoryBean的区别
一.BeanFactory简介 BeanFacotry是spring中比较原始的Factory.如XMLBeanFactory就是一种典型的BeanFactory.原始的BeanFactory无法支持 ...
- ahb时序解析
ahb 总线架构 AHB(Advanced High Performance Bus)总线规范是AMBA(Advanced Microcontroller Bus Architecture) V2.0 ...
- k8s入坑之路（8）kube-proxy详解
kube-proxy 每台机器上都运行一个 kube-proxy 服务,它监听 API server 中 service 和 endpoint 的变化情况,并通过 iptables 等来为服务配置负载 ...
- Jmeter下载安装（一）
一.JMeter介绍 JMeter使用了不同技术和协议,是一款可以进行配置和执行负载测试.性能测试和压力测试的工具.负载测试.性能测试和压力测试概念: 负载测试: 这类测试使系统或者应用程 ...