javascript基础复习之函数,定时器,erval函数
Function对象
JS中函数就是Function对象
函数名就是指向Function对象的引用
使用函数名就可以访问函数的对象
函数名()是调用函数
function 函数名 ([参数]) {函数体;
return 返回值;
}
定义函数对象
函数的返回值
默认返回undefined
可以使用return返回具体的值
函数的重载
JS的函数没有重载
调用时只要函数名一样,无论传入多少个参数,调用的都是同一个函数
没有接收到实参的参数值是undefined
所有的参数传递给arguments数组对象
JS传参比较灵活
比如定义了
function sum(a,b){}
然后传入参数 sum(1,2,3,4);也可以
因为JS会把传入的参数封装到一个名为arguments的数组中,然后把arguments传给函数
相当于在定义的函数中有个 arguments[0];
然后用arguments去给参数赋值
就是
a = arguments[0];
b = arguments[1];
因为arguments是一个数组所以还有点length属性,获取函数参数的个数。【i】还可以获取指定的参数。
!!!可以利用arguments实现可变参数的函数。
使用arguments模拟重载
function sum(){var sum=0;for(var i=0;i<arguments.length;i++){sum+=arguments[i];}return sum;}
无论传入几个参数,都会进行加和运算,因为用的arguments数组,因为每个传入函数的参数都会先存到arguments数组中,然后在函数里对这个数组里面的值进行操作,就可以实现重载的效果了……………………
66666666,JS这个地方确实666啊
使用Function对象创建函数
使用Function对象直接创建函数
var functionName = new Function(arg1,…argN,functionBody);
var add = new Function(“x”,”y”,”return(x+y);”);
var result = add(2,3);
alert(result); //5
alert(add);//弹出方法的文本
匿名函数
创建匿名函数
var func = function(arg1,……argN){ 函数体 return 返回值 }
也可以把匿名函数在sort()函数中用,把匿名函数写在sort的参数中,就是和那个compare函数一个意思了~~~
全局函数
全局函数可用于所有的javascript对象
常用的全局函数有:
parseInt/parseFloat
isNaN
eval
eval函数
用于计算表达式字符串,或者用于执行字符串中的javascript代码
只接受原始字符串作为参数
如果参数中没有合法的表达式和语句,则抛出异常
例如:
var s1 = “2+3”;
s1; //2+3;
eval(s1);//5
var s2 = “var n = 5;console.log(n);”
就是可以让写的字符串当做js代码运行~~~
一般用来 做计算器。。。科学计算器。。。
主要函数:
<script type="text/livescript">
function cal(){var input = document.getElementById("exp");var span = document.getElementById("result");//获取文本当中的字符串var exp = input.value;//将此字符串当做一个表达式来执行,两边加个括号,防止执行特殊的函数,,但还是可以直接执行alert()...;var r = eval("("+exp+")");span.innerHTML = r;}
</script>
还是可以运行alert()
写简单计算器好简单。。。。。
JS的外部对象
BOM
就是浏览器对象模型,用来访问和操作浏览器窗口,使javascript有能力与浏览器对话
通过使用BOM,可移动窗口,更改状态栏文本、执行其他不与页面内容发送直接联系的操作
没有相关标准,但被广泛支持
浏览器提供的API,能够对浏览器进行操作。
windows——浏览器
子对象:
history——–历史信息
loaction——地址栏
screen——–窗口
navigator—-基本信息
document—文档对象:页面的内容(还很复杂,还有很多下级)
这些个一起称之为BOM 浏览器对象模型
BOM中包含DOM(document)
DOM
文档对象模型,用来操作文档
定义了访问和操作HTML文档标准方法
应用程序通过对DOM树的操作,来实现对HTML文档数据的操作
这个DOM就是document
document是根
windows对象
window表示浏览器窗口
所有javascript全局对象、函数以及变量均自动成为window对象的成员
window对象常用方法:
alert(),confirm()
setTimeout(),clearTimeout()
setInterval(),clearInterval()
对话框
alert(str)
提示对话框,显示str字符串的内容
confirm(str) //用来检测对用户提示~
确认对话框,显示str字符串的内容
按确定按钮返回true,其他操作返回false
确定返回true,取消返回false;
定时器
多用于网页动态时钟,制作倒计时,跑马灯效果等
周期性时钟
以一定的时间间隔执行代码,循环往复
一次性时钟
在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行
打开网页,过一会自己出来东西。。。。定时刷新
周期性定时器
setInterval(exp,time): 周期性触发代码exp
exp:执行语句
time:时间周期,单位为毫秒
返回已经启动的定时器对象
clearInterval(tID): 停止启动的定时器
tID:启动的定时器对象
windows.setInterval(“alert(‘hello’);”,3000);
//或者
windows.setInterval(func,3000);
function func(){ alert(“hello”); }
就是到那个时间就循环执行那个函数,两种写法,直接写exp函数,或者写个函数,然后在exp写函数名
或者
clearInterval(定时器的名);
实例,动态时钟
js代码:
<script type="text/javascript">//定义全局变量,才能在启动函数给全局变量赋值后,在停止函数中清除计时器。var a;function start(){//获取span元素对象var span = document.getElementById("result");//设置计时器a = setInterval(func,1000);function func(){//创建时间对象,然后赋值给span当前时间方法返回值var shijian = new Date();span.innerHTML = shijian.toLocaleTimeString(); } } //设置停止函数,就是清除计时器function stop1(){ clearInterval(a); }
</script>
点击停止就会清除计时器,停止刷新,然后再次点击启动,就又会创建个计时器~~~
一次性定时器
setTimeout(exp,time): 一次性触发代码exp
exp: 执行语句
time: 间隔时间,单位为毫秒
返回已经启动的定时器
clearTimeout(tID): 停止启动的定时器
tID: 启动的定时器对象
与周期性定时器类似,就是函数名不一样是Timeout,而周期性的是 Interval ~~~
例子,点击删除后,显示操作成功,过两秒后隐藏掉操作成功,然后再次点击又会显示。
<script type="text/javascript">function del(){//先显示隐藏的内容,然后过两秒再隐藏掉var p = document.getElementById("msg");p.className = "show";
//设置一次性定时器,写个函数,在里面设置那个段落的classname为隐藏,然后清除定时器var a= setTimeout(function(){p.className ="hide";clearTimeout(a);},2000);}
</script><style type="text/css">
//设置两种class,一个是隐藏,一个是显示,用display属性控制,none是隐藏,block是显示
.hide {display: none;
}
.show {display: block;
}
</style>
在下面对那个操作成功的段落定义 id 为msg,class定义为hide(默认样式为隐藏) ,然后上面获取Byid ,在用元素对象点classname = “新的演示”即 show,就会变成显示的了。
然后两秒后隐藏。
window的常用属性
screen对象
包含有关客户端显示屏幕的信息
常用于获取屏幕的分辨率和色彩
常用属性
width/height //宽高
availWidth/availHeight //可用的宽高
可用的和现在的一样,是因为我把windows的下边的栏给默认隐藏了~
history对象
包含用户(在浏览器窗口中)访问过的URL
length属性: 浏览器历史列表中的URL数量
方法
back()
forward()
go(num)
alert(history.legth);
history.forward(); //等同于单击“前进”按钮
history.back(); //等同于单击“后退”按钮
history.go(-2); //等同于单击两次“后退”按钮 写2就是前进两步
location对象
包含有关当前URL的信息
常用于获取和改变当前浏览的网址
href属性:当前窗口正在浏览的网页地址
方法:
reload(): 重新载入当前网址,同时刷新按钮
loaction.href=”http://www.163.com”;
这个就跳转到163了
reload()是重新刷新下页面
navigator对象
包含有关浏览器的信息
常用于获取客户端浏览器和操作系统信息
navigator.userAgent
“Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36”
例子: 秒表计时器
js代码:
<script type="text/javascript">
var a;function start(){var i=0;var span = document.getElementById("result");a = setInterval(function(){span.innerHTML =i+"s";i+=1; },1000);} function stop(){clearInterval(a);}function qingling(){var span = document.getElementById("result");span.innerHTML ="";}</script>
例子2:用一次性定时器实现点击图片,然后图片放大,过两秒后再变回去
js代码:
<script type="text/javascript">function change(){//获取图片对象var image = document.getElementById("image");
//设置图片的样式变大image.className="da";
//设置当一次性定时器,2s后变回去。var a = setTimeout(function(){image.className = "xiao"; },2000);}
</script><style type="text/css">
.xiao{width:100px;height:100px; }
.da{width:200px;height:2oopx;}</style>
javascript基础复习之函数,定时器,erval函数相关推荐
- JavaScript基础复习之数据类型,解读数据类型不为人知的一面
<=> 朋友你好,这里是小毅的前端日记, 分享代码日常 ! <=> 本文目标:查缺补漏Javascript数据类型,解读数据类型不为人知的一面 <=> 卑微的大三前 ...
- JavaScript高级day01-PM【对象、函数、回调函数、IIFE、this、关于语句分号问题、webstorm代码模板、复习】
笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目 录 P7 07.尚硅谷_JS高级_对象 23:30 1. 什么是对象? 2. 为什么 ...
- JavaScript基础学习、复习笔记
文章目录 前言 一.js基础知识 (变量.数据类型.运算符) 1.变量 1.1 声明变量及初始化 1.2 变量更新 1.3 变量语法拓展 1.4 变量命名 1.5 交换两个变量的值 2. 数据类型(重 ...
- 前端---JavaScript基础2
文章目录 前端---JavaScript基础2 对象类型判断 call函数 对象属性操作 深拷贝方法 前端-JavaScript基础2 重构以下代码:(以面向对象的方式) 重构后:(其中this指针问 ...
- 【javascript基础——系列10】js中隐藏元素的几种方法以及代码
系列文章 [javascript基础--系列1]前端页面ajax连接后台服务器传输数据 [javascript基础--系列2]前端页面axios连接后台服务器传输数据 [javascript基础--系 ...
- 前端JavaScript DOM BOM 自学复盘 D1(DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数)
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
- JavaScript基础08-day10【函数的返回值、实参、立即执行函数、方法、全局作用域、函数作用域、提前声明、this、工厂方法创建对象、构造函数】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- JavaScript基础07-day09【嵌套for循环、break和continue、对象、数据类型、对象字面量、函数】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- js基础--javascript基础概念之函数
js基础--javascript基础概念之函数 引用w3c介绍: 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. JavaScript 函数语法 函数就是包裹在花括号中的代码块,前面使用 ...
最新文章
- vmware workstation 下安装ubuntu
- Chromium 组件DotNetBrowser V1.12发布 | Chromium引擎升级到版本60
- Windows窗口刷新机制详解
- d3.js 旋转图形_变化莫测的图形推理,你能解出几种?
- mysql 唯一索引 死锁_MySQL 死锁套路:唯一索引 S 锁与 X 锁的爱恨情仇
- inux系统中如何进入退出vim编辑器
- C# DataSet转JSON
- 软件版本 —— Alpha、Beta、RC、Stable版本的区别
- Node-Promise
- java jshelllink_02--Java Jshell的使用 最适合入门的Java教程
- 转录组拼接软件Trinity使用安装报错锦集
- WSAGetLastError错误列表
- edvac是商用计算机吗,计算机基础知识78228
- c语言第一章,C语言修正版第一章
- 论一个X倒下了千千万万个X站起来了
- python行为驱动测试开发_行为驱动开发在 Python 开发测试中的应用
- 2023 年的 Web Worker 项目实践
- 详解c语言编程库题,详解C语言编程
- 使用python输出真值表
- 联盟服务器维护,英雄联盟维护时间 lol官网服务器维护公告
热门文章
- 【NUCLEO-F767ZI】RT-Thread lwip的modbus-tcp
- python基础之--人机大战,编程思维
- 计蒜客习题:骑车比赛
- web在网页中引用字体包(.ttf)嵌入特殊字体
- python唐诗分析综合_全唐诗分析程序
- 《陈二狗妖孽人生》之经典语录
- 打印计算机准考证显示用户名未设置,职称计算机准考证打印时间须知2019年9月...
- 第一台计算机如何工作原理,世界上第一台计算机是什么原理_世界上第一台计算机...
- 论文解读:OMNI-DIMENSIONAL DYNAMIC CONVOLUTION
- python程序设计江红答案_python程序设计江红上机答案