前端基础之JS（一）

来源：互联网发布：心理咨询中文网软件编辑：程序博客网时间：2024/06/15 07:53

计时器
（1）（写在函数外面，秒数以毫秒开始，1000毫秒=1秒）
setInterval(“要调用的函数名”,秒数)添加计时器
clearInterval(计时器名称)清除计时器
（2）（用法与（1）相同，写在函数里面）
setTimeout()添加计时器
clearTimeout()清除计时器
getTime();1970年到现在的毫秒数
Sting对象
chatAt(index)返回在指定位置的字符（index从0开始，表示位置）
charCodeAt()返回指定位置字符unicode编码
concat()连接两个或多个字符串
fromCharCode()将编码转化成字符
indexOf()返回指定字符在字符串首次出现的位置（没找到返回-1）
slice(start,end)提取字符串（起始下标，终止下标）
split(separator,limit)分割字符串或数组（以”“为对象进行分割）
substr(a,l)提取字符串（a起始索引位置，l要提取字符串的长度）
substring(s,e)提取字符串（s起始索引位置，e结束的索引位置，包含s不包含e）
return false;停止在这一步，不往下继续进行
.toLowerCase()转化为小写
.trim()去掉两头的空格
Array对象
pop()删除最后一个元素
push()向数组末添加一个或多个元素
shift()删除第一个元素
unshift()向数组首添加一个或多个元素
splice()插入、删除、替换数组元素
reverse()顺序颠倒
join()将数组中所有元素转化为字符串
sort()对数组元素进行排序
DOM节点
childNodes()子节点（包含空节点）
firstChild()第一个子节点
lastChild()最后一个子节点
children不包含空节点
firstElementChild()不包含空的第一个子节点
lastElementChild()不包含空的最后一个子节点
parentChild()父节点
nextSibling()兄弟节点（后一个）
previousSibling()兄弟节点（前一个）
offsetParent()第一个有定位属性的父节点（如果没有则返回body）
appendChild()插入节点
creatElement()创建节点
creatTextNode()创建文字节点
insertBefore()在已有的子节点前插入
removeChild()删除节点
replaceChild()替换节点
event.stopPropagation()阻止事件冒泡
event.preventDefault()阻止默认事件
href=”javascript:void(0)”阻止a中默认跳转

小例子（小游戏）

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div{            width: 30%;            margin: 0 auto;        }        p{            height: 100px;            line-height: 100px;            background: #999;            text-align: center;            font-size: 24px;        }        input{            width: 100px;            height: 35px;        }    </style></head><body><div>    <p>123</p>    <input type="button" value="开始游戏" class="start"/>&nbsp;&nbsp;    <input type="button" value="停止" class="stop"/></div><script>    var arr=["大象","小狗","狮子","海豚","老虎","猫咪","企鹅","章鱼","白鹭"];    var startgame=document.getElementsByClassName("start")[0];    startgame.onclick=start;    function start(){        var animal=parseInt(Math.random()*arr.length);        document.getElementsByTagName("p")[0].innerHTML=arr[animal];    }    var timer=null;    startgame.onclick=function()    {        timer=setInterval("start()",150);    }    var stopgame=document.getElementsByClassName("stop")[0];    stopgame.onclick=function(){        clearInterval(timer);    }</script></body></html>

开始之前

开始后点击停止

阅读全文

0 0