JavaScript部分笔记04

对象

对象

内置对象

js定义好的对象 你可以拿过来直接用

Array   数组

Marth   数学处理

Date     事件相关

String    字符串

Array相关方法

concat 连接两个或多个数组 写法: arr1.concat(arr2)

join   将数组中的所有元素转换成字符串并连接到一起,返回最后生成的字符串

join用法

pop  表示删除数组最后一个元素

push 表示在数组的末尾添加一个元素

reverse  表示反转数组

splice  表示删除或添加元素

数组相关练习

字符串相关方法

charAt   用来取某个位置的字符

indexOf   判断某个字符是否在字符串中,如果是 返回第一次出现的位置     如果不是 那么返回-1

lastIndexOf  和indexOf功能一样 但是是从后面开始找

subStr  字符串截取 按个数截取

substring 字符串截取 按位置截取

replace  字符串替换

toLowerCase 字符串小写

toUpperCase  字符串大写

字符串相关方法
上传文件是否符合规定的代码

Math属性

Math.PI  圆周率

Math.abs  取绝对值

Math.ceil   向上取整

Math.floor  向下取整

Math.max 求最大值

Math.min  求最小值

Math.pow  求X的Y次方

Math.round 四舍五入

Math的属性与方法1

Math.random() 求0-1的随机数

求min-max的随机数

function fn(min,max){

// Math.floor(Math.random()*30+1)  求0-30

//Math.floor(Math.random()*(30-10+1)+10) 求10-30的值

//Math.floor(Math.random()*(max-min+1)+min) 得出min-max的值

return Math.floor(Math.random()*(max-min+1)+min)

}

Math.random 随机数应用

Date 属性

new Date() 表示当前时间

new Date(2019,11,23,11,15,33) 数字类型下 国外的月份是0-11计算的

new Date(‘2019/12/23,11:15:33’)

Date 日期的属性

Date 方法

Date 方法

setInterval

setInterval  重复执行某段代码 跟for不同的是 它有时间概念 可以设置时间 多少时间执行一次代码块 会循环执行

清除他的方法:clearInterval

用法:setInterval(代码块,时间)

setInterval使用方法

注意点:代码块里不能加() 加了括号代表函数调用并返回一个结果   不能执行该函数

点击开始随机获得随机数
代码

知识点:clearInterval  清除定时器

注意:在开启一个定时器前,需要先清除一个定时器

setTimeout   相当于一个定时炸弹在多少时间后再执行 只执行一次

写法:setTimeout(fn,1000)  1000毫秒后执行函数

弹窗广告的示例代码
用settimeout与递归做发送验证码效果
用setinterval做发送验证码效果

clearTimeout

用法与clearInterval 差不多 用于清除setTimeout

点击开始自动计时效果
clearTimeout代码示例

自定义属性

由自己定义的属性 

自定义属性应用
让鼠标移入时显示不同内容
实现代码

完善代码

<script type="text/javascript">

var abtn=document.getElementsByTagName('button')//需求:点击btn1 弹出div1 点击btn2 弹出div2

var awrap=document.getElementById('wrap')

var adiv=awrap.getElementsByTagName('div')//新知识 选择范围

var timer=null

for(var i=0;i<abtn.length;i++){

abtn[i].xiabiao=i

abtn[i].onmouseover=function(){

clearInterval(timer) //当移入时取消自动滚轮 timer

for(var j=0;j<adiv.length;j++){ //这里是先把所有都div都隐藏

adiv[j].style.display='none'

abtn[j].style.backgroundColor='#009f95'

}

adiv[this.xiabiao].style.display='block' //让i循环的div出现

this.style.backgroundColor='red'

}

abtn[i].onmouseout=function(){

nowxiabiao=this.xiabiao //移入时 将当前的下标赋给

zidong()

}

}

      zidong()

  var nowxiabiao=0

//自动滚轮系统

function zidong(){

timer= setInterval(function(){

nowxiabiao++

nowxiabiao%=abtn.length

for(var j=0;j<adiv.length;j++){ //这里是先把所有都div都隐藏

adiv[j].style.display='none'

abtn[j].style.backgroundColor='#009f95'

}

adiv[nowxiabiao].style.display='block'

abtn[nowxiabiao].style.backgroundColor='red'

},1000)

}

</script>

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第五章******************************************************...
    fastwe阅读 838评论 0赞 0
  • # 数组部分 # 1.## array_chunk($arr, $size [, $preserve_key = ...
    clothTiger阅读 1,383评论 0赞 1
  • JS基础讲解 JavaScript组成ECMAScript:解释器、翻译DOM:Document Object M...
    FConfidence阅读 663评论 0赞 1
  • JS基本数据类型及变量声明在js中有三种声明变量的方式:var let const,let var const的区...
    web佳阅读 986评论 1赞 8
  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 1,273评论 0赞 1

友情链接更多精彩内容