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 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...
随机推荐
- 【Java虚拟机4】Java内存模型（硬件层面的并发优化基础知识--缓存一致性问题）
前言 今天学习了Java内存模型第一课的视频,讲了硬件层面的知识,还是和大学时一样,醍醐灌顶.老师讲得太好了. Java内存模型,感觉以前学得比较抽象.很繁杂,抽象. 这次试着系统一点跟着2个老师学习 ...
- 【c++ Prime 学习笔记】第11章 关联容器
关联容器的元素按照关键字来保存和访问,而顺序容器的元素是按照在容器中的位置来保存和访问 关联容器支持高效的关键字查找和访问 2种关联容器: map中的元素是关键字-值对(key-value对),关键字 ...
- Sequence Model-week1编程题2-Character level language model【RNN生成恐龙名 LSTM生成莎士比亚风格文字】
Character level language model - Dinosaurus land 为了构建字符级语言模型来生成新的名称,你的模型将学习不同的名字,并随机生成新的名字. 任务清单: 如何 ...
- MySQL：基础语法-1
MySQL:基础语法-1 记录一下 MySQL 基础的一些语法,便于查询,该部分内容主要是参考:bilibili 上 黑马程序员 的课程而做的笔记,由于时间有点久了,课程地址忘记了 关于数据库的安装操 ...
- C/C++编程笔记：浪漫流星雨表白装b程序
作为一个未来可能会成为一个专业程序员的小伙们,不知道你们现在学到哪里了,学了点东西之后有没有想在你女朋友面前装个大大的b呢,今天小编就给你一个机会来研究一下下边的代码吧,保证大写的N,当然大佬是排除在 ...
- 助你上手Vue3全家桶之Vue-Router4教程
目录 1,前言 1,Router 2.1,跳转 2.2,打开新页面 3,Route 4,守卫 4.1,onBeforeRouteLeave 4.2,onBeforeRouteUpdate 4.3,路由 ...
- Luogu P1538 迎春舞会之数字舞蹈 | 模拟
题目链接 大水题,暴力输出,代码应该能看吧...... #include<iostream> #include<cstdio> using namespace std; int ...
- 我为啥开始用CSDN博客
今晚开通CSDN博客,并且决定以后每天都使用这个不错的东西.与此同时,在博客园也开通了一个:http://www.cnblogs.com/fish7/ 我原本是把做过的题都用WPS整理的,然后每次打印 ...
- lvs 四层负载相关
都打开 /etc/sysctl.conf 中的 net.ip4.ip_forward=1.开启路由转发功能. 分发器 : eth0:192.168.1.66 (VIP) eth1:192.168.2. ...
- Linux 安装nacos
1.已有mysql环境 2.解压文件 #tar -zxvf package/nacos-server-2.0.1.tar.gz 3.创建数据库nacos_config(confnacos-mysql. ...