js(2)

最新推荐文章于 2022-12-01 21:45:00 发布

enternal567

最新推荐文章于 2022-12-01 21:45:00 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/enternal567/article/details/78867810

版权

一.Math对象：
random() 随机数在0-1之间
round() 四舍五入
ceil（）向上舍入
floor() 向下舍入
max() 最大值
min() 最小值
显示随机数：

<script>
    function show(){
    var x=Math.floor((Math.random()*10));
        document.getElementsByTagName("p")[0].innerHTML=x;
    }
    show();
    window.setInterval("show()",1000);
</script>

随机数都是小数所以要乘十，并且向下舍入，才能得到整数。
显示最大，最小值：

<script>
    alert(Math.max(12,34,56,67));
    alert(Math.min(23,45,67,11));
</script>

运行结果：这里写图片描述
二.计时器
setInterval()
clearInterval()

setTimeout()
clearTimeout()
（1）用setInterval实现

<body>
<p class="time"></p>
<button class="stop">停止</button>
<button class="start">开始</button>
<script>
    function show(){
        var t=new Date().toLocaleString();
        document.getElementsByClassName("time")[0].innerHTML=t;
    }
    show();
    var timer=window.setInterval("show()",1000);
    var stop=document.getElementsByClassName("stop")[0];
    var start=document.getElementsByClassName("start")[0];
    stop.onclick=function(){
        clearInterval(timer)
    };
    start.onclick=function(){
        timer=window.setInterval("show()",1000);
    }
</script>
</body>

运行结果：这里写图片描述
（2）用setTimeout实现

<body>
<p class="time"></p>
<button class="stop">停止</button>
<button class="start">开始</button>
<script>
    function show(){
        var t=new Date().toLocaleString();
        document.getElementsByClassName("time")[0].innerHTML=t;
        var timer=setTimeout("show()",1000);
    }
    show();
    document.getElementsByTagName("button")[0].onclick=function() {
        clearTimeout(timer)
    }
</script>
</body>

运行结果和上个例子相同。
三.date对象
new Date()
.toLocaleString()
.toLocaleTimeString()
.toLocaleDateString()

getFullYear()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
eg.显示现在的日期和时间

<body>
<script>
    var m=new Date();
    document.write("现在是:"+ m.getFullYear()+"年"+ (m.getMonth()+1)+"月"+
            m.getDate()+"日"+ m.getHours()+"时"+ m.getMinutes()+"分"+
            m.getSeconds()+"秒"+"星期"+ m.getDay());
</script>
</body>

运行结果: 这里写图片描述
eg（2）.生日倒计时

<body>
<p>距离过生日还有: <span></span></p>
<script>
    function show(){
    var oldday=new Date(2018,3,16,0,0,0).getTime();
    var newday=new Date().getTime();
    var time=parseInt((oldday-newday)/1000);
    var day=Math.floor(time/(24*60*60));
    var hour=Math.floor((time-day*24*60*60)/3600);
    var minu=Math.floor((time-day*24*3600-hour*3600)/60);
    var second=Math.floor(time-day*24*3600-hour*3600-minu*60);
    document.getElementsByTagName("span")[0].innerHTML=day+"天"+hour+"小时"+minu+"分"+second+"秒"
    }
    show();
    setInterval("show()",1000);
    window.onload=function(){
        show();
    }
</script>
</body>

运行结果：这里写图片描述
四.string对象
属性
length 长度
方法：
charAt(index) 返回指定位置的字符 //index表示位置，从0开始；
charCodeAt() 返回指定位置的字符unicode编码
concat() 方法用于连接两个或多个字符串。
fromCharCode() 把指定的unicode编码转换成为字符串
indexOf(要查找的字符串，[起始位置]) 返回指定字符在字符串中首次出现的位置，如果没有找到则返回-1;
slice(star,end)截取字符串的一部分，并返回新的字符串 star表示截取的起始位置，end表示截取的结束位置位置从0开始
split(x,[y]) 分割字符串成字符串数组； x表示分割的参考对象，y是可选项，y表示设置分割成数组个数；
substr(a,l) 提取字符串，a表示起始的索引位置，l表示要提取的字符串的长度；
substring(s,e) 提取字符串 s 表示起始索引位置，e表示结束的索引位置，包含s，不包含e位置；
eg.

<script>
    var str1="hello,word";
    var str2=" have a good time";
    var str3=" enjoy yourself";
    document.write(str1.charAt(2)+"<br>");
    document.write(str1.charCodeAt(2)+"<br>");
    document.write(str1.concat(str2,str3)+"<br>");
    document.write(String.fromCharCode(65)+"<br>");
    document.write(str1.indexOf("o")+"<br>");
    document.write(str1.indexOf("o",5)+"<br>");
    document.write(str1.lastIndexOf("d")+"<br>");
    document.write(str1.replace("o","a")+"<br>");
    document.write(str1.slice(2,8)+"<br>");
    document.write(str1.split("",3)+"<br>");
    document.write(str1.substr(3,5)+"<br>");
</script>

运行结果：这里写图片描述
五.

<form  novalidate></form>

novalidate禁止浏览器默认验证
六.array对象

方法：
concat()连接两个或多个数组；
pop()删除最后一个元素
shift()删除第一个元素
push(）向数组末尾添加一个或多个元素
unshift（）向数组开头添加一个或多个元素
splice() 方法用于插入、删除或替换数组的元素。
splice(index,how,[news])
// index 表示添加或删除的位置
// how 为0 表示添加，如果数大于0表示删除个数，如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
//news 为可选项，表示添加的元素
reverse() 方法用于颠倒数组中元素的顺序。
join() 方法用于把数组中的所有元素转换一个字符串。
eg.点击倒序显示

<body>
<input type="text" class="user"/>
<input type="button" class="btn" value="点击倒序显示"/>
<script>
    var user=document.getElementsByClassName("user")[0];
    var btn=document.getElementsByClassName("btn")[0];
    btn.onclick=function(){
        var arrone=user.value.split("");
        user.value=arrone.reverse().join("");
    }
</script>
</body>

输入：1234567
输出：7654321
eg.提交验证：用户名不能为空，密码为6-14位，邮箱包含@和.

 /*用户名验证*/
    function checkform(){
        var use=document.getElementsByClassName("username")[0];
        if(use.value.length==0){
            document.getElementsByClassName("usertxt")[0].innerText="用户名不能为空";
            return false;
        }else{
            for(var i=0;i<use.value.length;i++)
            var one=use.value.trim().toLocaleLowerCase().charAt(i);
            if(!(one>=0&&one<=9)&&!(one>="a"&&one<="z")&&one!="_"){
                document.getElementsByClassName("pwdtxt")[0].innerText="用户名输入错误"
                return false;
            }
        }
    /*密码验证*/
        var pwd=document.getElementsByClassName("pwd")[0];
        if(pwd.value.length==0){
            document.getElementsByClassName("pwdtxt")[0].innerText="密码不能为空";
            return false;
        }else if(!(pwd.value.length>=6 && pwd.value.length<=12)){
            document.getElementsByClassName("pwdtxt")[0].innerText="密码必须为6-12位";
            return false;
        }
        /*邮箱验证*/
        var email=document.getElementsByClassName("email")[0];
        if(email.value.indexOf("@",0)==-1||email.value.indexOf(".",0)==-1){
            document.getElementsByClassName("emailtxt")[0].innerText="邮箱格式不正确";
            return false;
        }
    }
</script>

这里写图片描述

轮播图：

<script>
    var index=1;
    var aspan=document.getElementsByTagName("span");
    function showimg(){

        for(var i=0;i<aspan.length;i++){
            aspan[i].className="";
        }
        aspan[index-1].className="current";

        document.getElementsByClassName("banimg")[0].src="img/"+index+".jpg";
        index++;
        if(index>5){
            index=1;
        }

    }
    showimg();
    timer=setInterval("showimg()",3000)
</script>

七.节点
getAttribute(“属性名”) 获取属性值

setAttribute(“属性名“，”新的属性值 “) 设置属性值

获取子元素
childNodes() 包含空节点

children() 不包含空节点

第几个子节点： childNodes[index] /children[index]

firstChild 第一个子节点
lastChild 最后一个子节点

firstElementChild 不包含空第一个子节点
lastElementChild 不包含空最后一个子节点

parentNode() 父节点

兄弟节点
nextSibling 下一个兄弟节点包含空节点
previousSibling 前一个兄弟节点包含空节点

nextElementSibling 下一个兄弟节点不包含空节点、
previousElementSibling 前一个兄弟节点不包含空节点

offsetParent 第一个有定位属性的父节点，如果没有则返回body

document.createElement(“要添加的节点标签名”) 创建元素节点

父节点.appendChild(新节点) 在父节点的内部后面插入新节点

insertBefore(新节点，子节点) 把新节点内容添加到子节点的前面

<script>
    var a=document.getElementsByTagName("p")[0];
    alert(a.childNodes.length);
    alert(a.childNodes[3].innerText);
    alert(a.firstChild.innerText);
    alert(a.lastChild.innerText);
    alert(a.children.length);
    alert(a.children[3].innerText);
    alert(a.firstElementChild.innerText);
</script>

eg2.

<script>
    var btn=document.getElementsByClassName("btn")[0];
    btn.onclick=function(){
        var newa=document.createElement("a");
        newa.href="http://www.baidu.com";
        newa.innerHTML="百度";
        newa.target="_blank";
        document.getElementsByTagName("h3")[0].appendChild(newa);
    }
</script>

点击添加出现百度这里写图片描述
删除元素：

<body>
<ul>
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
</ul>
<button>删除</button>
<script>
    var btn=document.getElementsByTagName("button")[0];
    btn.onclick=function(){
        var ul=document.getElementsByTagName("ul")[0];
        ul.removeChild(ul.firstElementChild);
    }
</script>
</body>

替换元素：

<script>
    var btn=document.getElementsByTagName("button")[0];
    var oldnode=document.getElementsByTagName("h3")[0];
    btn.onclick=function(){
        var newp=document.createElement("p");
        newp.innerHTML="bye";
        oldnode.parentNode.replaceChild(newp,oldnode)
    }
</script>

点击替换按钮把hello替换成bye
搜索框：

<script>
    var data=["hello","bye","because","how","dangerous","problem","welcome"];
    var box=document.getElementsByClassName("searchbox")[0];
    box.onkeyup=function(){
        var write=this.value;
        var news=[];
        for(var i=0;i<data.length;i++){
            if(write.trim().length>0&&data[i].indexOf(write)>-1){
                news.push(data[i]);
            }
        }
        var showlist=document.getElementsByClassName("showlist")[0];
        showlist.style.visibility="visible";
        showlist.innerHTML="";
        if(news.length==0){
            showlist.style.visibility="hidden";
        }
        var newvalue=this;
        for(var j=0;j<news.length;j++){
            var newp=document.createElement("p");
                newp.innerHTML=news[j];
            newp.onclick=function(){
                newvalue.value=this.innerHTML;
                showlist.style.visibility="hidden";
            };
            showlist.appendChild(newp);
        }
    }
</script>

这里写图片描述
八.事件：
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
事件冒泡
事件捕获
阻止事件冒泡
1、event.stopPropagation(); 阻止冒泡
2、event.preventDefault(); 阻止默认事件
阻止超链接默认事件：<a href="javascript:void(0)">百度</a>
3、return false;阻止默认事件，阻止冒泡事件；
eg.留言板

<script>
    var btn=document.getElementsByClassName("btn")[0];
    btn.onclick=function() {
        var newvalue=document.getElementById("content").value;
        var newp=document.createElement("p");
        newp.innerHTML=newvalue+"<a href='' class='del'>删除</a>";
        var showlist=document.getElementsByClassName("show")[0];
        showlist.appendChild(newp);
        document.getElementById("content").value=null;
        var delbtn = document.getElementsByClassName("del");
        for (var i = 0; i < delbtn.length; i++) {
            delbtn[i].onclick = function (e) {
                e.preventDefault();
                showlist.removeChild(this.parentNode);
            }
        }
    }
</script>

这里写图片描述

enternal567

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js(2)

一.Math对象： random() 随机数在0-1之间 round() 四舍五入 ceil（）向上舍入 floor() 向下舍入 max() 最大值 min() 最小值显示随机数：<script> function show(){ var x=Math.floor((Math.random()*10)); document.ge
复制链接

扫一扫

js(2)

“相关推荐”对你有帮助么？