JS一起学04：函数返回值、定时器、随机数、自动播放的幻灯片
2024-05-10 01:46:25
一、函数返回值----将相应的值返回到函数调用的地方
1. 可以不写返回值
2. 可以没有return，如果不返回，默认返回undefined
3. 本函数内，renturn之后的JS语句不再执行，跳出
4. 可以返回任意类型
例一：window.οnlοad=function() {function fn() {var a=4;alert(123);return a+1;alert(456);};//默认返回undefinedalert( fn() );};
例二：function fn(){var a=4;return [a];}var n=fn();alert()n[0];例三：function fn(){var a=4;return function(){alert(a);};};//默认返回undefined//var n=fn(); //闭包fn()();
5. 函数预解析，函数可以先用后定义---->同一个作用域下
var oBtn=document.getElementById('btn');oBtn.οnclick=function(){fn(3);}function fn(a){ //预解析alert(a);}
6. 局部函数也会预解析：当JS执行到这个函数的时候才会预解析。
fn();function fn(){fn2();function fn2(){alert(444);}}
7. 变量也会预解析,可以理解为提前设定 var a; 只有var，才会预解析
8. return时函数就结束了，return 后面的代码不会执行。没有return 时，返回undefined
例一：
var a=5;
function fn(){
alert(a);
var a=4;
alert(a);
}
fn(a);
alert(a); //全局变量不受局部影响
例二：
var a=5;
function fn(){
alert(a); //5
a=4;
alert(a); //4
}
fn();
alert(a); //4
9. 一个函数应该只返回一种类型的值
function show(a,b){
return a+b;
}
alert(show(11,12));
变量、参数、返回值——可以装任何东西（数字、字符串、元素、数组、函数）
二、定时器
定时器---同一个对象 ： 每次用之前先清掉上一次
定时器中不能用this
1. 开启定时器
(1) setInterval 间隔型
(2) setTimeout 延时型
可以在函数内部调用函数自己
function f(){
alert(123)
setTimeout(f,1000);
}
setTimeout(f,1000);
2. 停止定时器
clearInterval / clearTimeout
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
oBtn1.οnclick=function(){
timer=setInterval(function(){
alert('a')
},3000);
}
oBtn2.οnclick=function(){
clearInterval(timer);
}
3. var oBox=document.getElementById('box');
function f(){
alert(123);
}
// setInterval('alert(11)',500); //第一个参数也可以放字符串，相当于eval
setInterval(f,500);
4.闪烁提醒
var timer;
oBtn.οnclick=function(){
oDiv1.style.display=oShadow.style.display='block';
}
oShadow.οnclick=function(){
clearInterval(timer);
timer=setInterval(function(){
var n=0;
n++;
n%2==0?oH1.style.background='#ccc':oH1.style.background='#f00';
n=20&&clearInterval(timer);
},50);
}
5. 双色球
function findSame(arr,n){
for(var i=0;i<arr.length;i++){
if(arr[i]==n){
return false;
}
return true;
}
}
function rnd(n,m){
return parseInt(Math.random()*(m-n+1)+n);
}
function toDou(n){
if(n<10){
return '0'+n;
}
return ''+n;
}
window.οnlοad=function(){
var oBtn=document.getElementById('btn');
var oBox=document.getElementById('box');
var arr=[];
oBox.innerHTML='';
oBtn.οnclick=function(){
while(arr.length<6){
var number=rnd(1,33);
if(findSame(arr,number)){
arr[arr.length]=toDou(number);
}
}
arr[arr.length]=toDou(rnd(1,16));
for(var i=0;i<arr.length;i++){
var Class=i==arr.length-1?'blue':'';
oBox.innerHTML+='<span class="'+Class+'">'+arr[i]+'</span>';
};
}
}
6. 延时提示框
(1) 移除延时隐藏----移入下面的div后，还是隐藏了
(2) 简化代码----把长得像的变成长得一样的。合并两个相同的mouseover和mouseout。连等。
三、随机数
1. Math：处理数学任务
0 <= Math.random() <1
0 <= Math.random()*100 <100
2. 公式：求n-m(不会出现m) Math.random()*(m-n)+n
求n-m(出现m) Math.random()*(m-n+1)+n
Math.random()*（大-小）+小
例一：随机数
window.οnlοad=function(){
for(var i=0;i<100;i++){
//0-1 document.write(Math.random()+'<br />');
//0-100 document.write(Math.random()*100+'<br />');
//10-30 document.write(Math.random()*20+10+'<br />');
//5-20包括20 document.write(Math.random()*(20-5+1)+5+'<br />');
}
}
例二：随机颜色
window.οnlοad=function(){
var oBox=document.getElementById('box');
oBox.οnclick=function(){
var r=rnd(0,255);
var g=rnd(0,255);
var b=rnd(0,255);
this.style.background='rgb('+r+','+g+','+b+')';
}
}
function rnd(n,m){
return parseInt(Math.random()*(m-n)+n);
}
例三：彩票
function rnd(n,m){
return parseInt(n+Math.random()*(m-n));
}
var arr=[];
var num;
while(arr.length<6){
num=rnd(1,33);
if(findInArr(n,m){
arr.push(num);
}
}
alert(arr);
function findInArr(arr,n){
for(var i=0;i<arr.length;i++){
if(arr[i]==n){
return false;
}
}
return true;
}
四、自动播放的幻灯片
var oBox=document.getElementById('box');
var aBtn=oBox.getElementsByTagName('input');
var aDiv=oBox.getElementsByTagName('div');
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].οnclick=function(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className='';
aDiv[i].className='';
}
this.className='active';
aDiv[this.index].className='show';
}
if(aBtn[i].className=='active') iNow=i;
}
function f(){
iNow++;
if(iNow==aBtn.length)iNow=0;
for(var i=0;i<aBtn.length;i++){
aBtn[i].className='';
aDiv[i].className='';
}
aBtn[iNow].className='active';
aDiv[iNow].className='show';
}
var timer=setInterval(f,1000);
oBox.οnmοuseοver=function(){
clearInterval(timer);
}
oBox.οnmοuseοut=function(){
timer=setInterval(f,1000);
}
JS一起学04：函数返回值、定时器、随机数、自动播放的幻灯片相关推荐
- JS(函数返回值、获取非行间样式、函数封装、函数复用、定时器)
// 函数返回值 // 什么时候需要用:函数外想要使用内部的数据的时候 // 语法: return 返回值 // 1.返回回函数里的值 function fun1 (){ var a = 1; ret ...
- java 定时器返回值_javascript 函数返回值（return）、定时器（setTimeout、setInterval）...
一.函数的返回值:return 1.函数名+括号=return后面的值 function fn1(){ return 100; } alert(fn1()); // 100 fn1()=return后 ...
- js中函数返回值return
全栈工程师开发手册 (作者:栾鹏) js系列教程4-函数.函数参数教程全解 函数返回值 1.所有函数都有返回值,没有return语句时,默认返回内容为undefined,和其他面向对象的编程语言一样, ...
- 模板引擎不关心内容之——art-template，碰见的同步与fs.readFile异步以及函数回调问题的描述，针对fs的readfille读取文件时，返回不了异步函数返回值的解决方法
模板引擎不关心内容 art-template art-template不仅可以在浏览器使用,也可以在node中使用 npm install art-template该命令在哪执行就会把包下载在哪里,默 ...
- python 函数返回值的特殊情况
今天没事和大家一起聊聊python 函数返回值的特殊情况,之前我也碰到过类似方面的问题,到后来查阅了一些资料后,发现原来是这样! 我记得很久以前和大家聊过python列表操作方法,python列表非 ...
- go函数详解：函数定义、形参、返回值定义规范、函数内存分析、不支持重载、支持可变参数、基本数据类型和数组默认都是值传递的、支持自定义数据类型、函数返回值命名
引入 [1]为什么要使用函数: 提高代码的复用型,减少代码的冗余,代码的维护性也提高了 [2]函数的定义: 为完成某一功能的程序指令(语句)的集合,称为函数. [3]基本语法 func 函数名(形参列 ...
- C语言 const 修饰函数返回值 - C语言零基础入门教程
目录 一.const 简介 1.const 修饰变量 2.const 修饰指针 二.const 修饰在函数名前面 三.const 修饰在函数名后面 四.猜你喜欢 零基础 C/C++ 学习路线推荐 : ...
- python返回值return用法_Python中return函数返回值代码实例用法
本篇文章小编给大家分享一下Python中return函数返回值代码实例用法,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. return 添加返回值 r ...
- linux 变量函数返回值,linux shell 自定义函数(定义、返回值、变量作用域）介绍...
linux shell 可以用户定义函数,然后在shell脚本中可以随便调用.下面说说它的定义方法,以及调用需要注意那些事项. 一.定义shell函数(define function) 语法: [ f ...
最新文章
- 【Go】Go基础（一）：Hello World!
- hbase.client.keyvalue.maxsize的默认值
- 揭开Google暴利秘密的数学公式
- 基于CNN的阅读理解式问答模型：DGCNN
- 网站静态化的实现以及纯伪静态优缺点
- Flink应用实战案例50篇（一）- Flink SQL 在京东的优化实战
- 【公告】社区周刊即日起停刊
- 右侧按钮登录注册html,翻转式用户登录注册界面设计
- 12306第一波春运售票高峰：“云查询”每秒40万次
- 企业微信开发整理汇总
- C语言四种swap函数
- Rush Leetcode
- typeScript构建失败：Non-string value passed to `ts.resolveTypeReferenceDirective`
- 微软 无线键盘 linux,在Deepin系统中连接微软人体工学键盘蓝牙失效的解决方法...
- Windows禁用端口（445端口为例）
- 安装CUDA-10.0
- vue中，应用mapbox地图——地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language地图英文转中文 accesstokens-访问令牌移动端地图-leaflet
- logstash-plugin could not create the java virtual machine.
- 《C语言名题精选百则----8》
- ACM-–模拟打印–-湘大OJ 1086--菱形--水