JavaScript练习----知识点补充_time=new date().gethours()-CSDN博客

本文链接：https://blog.csdn.net/m0_52972784/article/details/124478553

日期

获得此刻的时间

document.write(Date());

获得小时数

var time=new Date().getHours();

获得天数

var day=new Date().getDay();
//day结果为4，今天周四

等等等等，还有很多Date对象相关方法
参考这个教程：点击此链接

onerror事件

//HTML里：
<button type="button" onclick="al()">点击我</button>
//js里：
function al() {
    asdflert("输出！！！");   //点击按钮，本来是要调用此函数，但是此函数中错误了，会触发onerror事件
}
onerror = cw;     //当发生错误时调用cw函数
function cw(msg) {
    var t = "该页面有一个错误\n";
    t += "错误：" + msg + "\n";    
    alert(t);     //最后点击按钮，弹出的窗口上会显示t的值
}

JavaScript Cookie

Cookie是一些数据，存储于电脑的文本文件中，用于存储web页面的用户信息，作用就是用于解决“如何记录客户端的用户信息”问题。

下面我们将创建一个欢迎cookie

设置cookie值的函数：用于存储访问者的名字

//设置cookie的名称：cname, cookie的值：cvalue， cookie的过期时间：expires
function setCookie(cname,cvalue,exdays){
    var d=new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires="expires="+d.toGMTString();//toGMTString()函数用于以字符串形式返回一个日期
    document.cookie=cname+"="+cvalue+";"+expires;
}

获取cookie值的函数：用于返回指定cookie的值

function getCookie(cname){
    var name=cname+"="; //用于检索指定cookie：cname+"="
    var ca=document.cookie.split(';'); //使用分号来分割document.cookie字符串，并把分割后的字符串数组赋值给ca
    for(var i=0;i<ca.length;i++){
    var c=ca[i].trim(); //去除数组中每个值的前后空格
    if(c.indexOf(name)==0){  //如果找到了cookie
    	return c.substring(name.length,c.length);  //返回cookie的值
    	}
	}
	return "";  //如果没有找到cookie，则返回""
}

检测cookie值的函数：用于检测cookie是否创建

function checkCookie(){
    var user=getCookie("username");
    if(user!=""){
    alert("欢迎再次回来！ "+user);  //如果设置了cookie，将显示一个问候信息
    }else{
    user=prompt("请输入用户名：","");  //如果没有设置cookie，将显示一个弹窗用于询问访问者的名字
    if(user!=""&&user!=null){
    	setCookie("username",user,365);  //调用setCookie函数将访问者的名字存储365天
    	}
    }
}

image对象

水平间距和垂直间距

document.getElementById("eg").hspace="50";  //水平间距
document.getElementById("eg").vspace="50";  //垂直间距

event对象

keyCode

html里：
<body onkeyup="whichbutton(event)"></body>
js里：
function whichbutton(event){
    alert(event.keyCode);
}

鼠标的坐标

html里：
<p onmousedown="coords(event)">点击这一行，会弹出提示鼠标指针坐标的消息框</p>
js里：
function coords(event){
       alert("x的坐标："+event.clientX+",y的坐标："+event.clientY);
}

某个键是否被按下，如shift键

html中：
<p onmousedown="ispress(event)">点击该段落，弹窗会提示是否按下shift键</p>
js中：
function ispress(event){
    if(event.shiftKey==1){
        alert("shift键被按下");
    }else{
        alert("shift键没有被按下");
    }
}

Select及Option对象

比较多，举个例子，一一对应着代码看吧

HTML中：

 <form id="myform">
       <select id="myselect">
           <option>桃子</option>
           <option>西瓜</option>
           <option>芒果</option>
           <option>甘蔗</option>
        </select>
       <br><br>
  </form>
  <input type="button" value="禁用列表" onclick="yes()">
  <input type="button" value="启用列表" onclick="no()">
  <button onclick="myop()">列表有几种选择？</button>
  <button onclick="mysize()">修改列表大小</button>
  <button onclick="many()">选择多个</button>
  <button onclick="sel()">输出选择的选项</button>
  <button onclick="selec()">弹出选中项</button>
  <button onclick="sz()">设置你的选项</button>
  <button onclick="rem()">移除你的选项</button>


  JS中：
  
function yes(){
    document.getElementById("myselect").disabled=true;
}
function no(){
    document.getElementById("myselect").disabled=false;
}
function myop(){
    alert(document.getElementById("myselect").length);
}
function mysize(){
    document.getElementById("myselect").size=4;
}
function many(){
    document.getElementById("myselect").multiple=true;
}
function sel(){
    var x= document.getElementById("myselect");
    for(var i=0;i<x.length;i++){
        if(x.options[i].selected){
            var txt=x.options[i].text;
        }
    }
    alert(txt);
}
function selec(){
    var x= document.getElementById("myselect");
    alert(x.selectedIndex);
}
function sz(){
    var x= document.getElementById("myselect");
    x.options[x.selectedIndex].text="甜瓜";
}
function rem(){
    var x= document.getElementById("myselect");
    x.remove(x.selectedIndex);
}

数组对象

数字排序（按数字顺序排序）

   array.sort(function(a,b){return a-b});

数字排序（按数字顺序降序）

  array.sort(function(a,b){return b-a});

在数组的开头增加新元素

  array.unshift();

将数组转换为字符串

  array.toString();

对调位置

  rows[i].parentNode.insertBefore(rows[i+1],rows[i]);//把两行的位置（rows[i+1]和rows[i]）对调

举个例子，对一个表格进行排序，实现效果如下：
在这里插入图片描述
代码如下：

html中：

    <body>
        <p>点击按钮，表格按Name字段的字母进行排序</p>
        <button onclick="px()">点我排序</button>
        <table id="mytable" border="1">
            <tr>
                <th>Name</th>
                <th>url</th>
            </tr>
            <tr>
                <td>Runoob</td>
                <td>www.runoob.com</td>
            </tr>
            <tr>
                <td>Google</td>
                <td>www.google.com</td>
            </tr>
            <tr>
                <td>Baidu</td>
                <td>www.baidu.com</td>
            </tr>
            <tr>
                <td>Zhihu</td>
                <td>www.zhihu.com</td>
            </tr>
            <tr>
                <td>Weibo</td>
                <td>www.weibo.com</td>
            </tr>
            <tr>
                <td>Taobao</td>
                <td>www.taobao.com</td>
            </tr>
        </table>
    </body>


js中：

function px(){
    var xh=true;
    while(xh){
        xh=false;
        var table=document.getElementById("mytable");
        var rows=table.rows;
        for(var i=1;i<rows.length-1;i++){
            if(rows[i].getElementsByTagName("TD")[0].innerHTML.toLowerCase()>rows[i+1].getElementsByTagName("TD")[0].innerHTML.toLowerCase()){
                rows[i].parentNode.insertBefore(rows[i+1],rows[i]);
                xh=true;
                break;
            }
        }
    }
}

盒子的显示与隐藏

classList.toggle()方法:显示和隐藏元素
//下拉菜单的显示和隐藏：点击按钮，显示或隐藏下拉菜单
html中：
    <body>
        <button id="menu" onclick="mybu()">下拉菜单</button>
        <div id="neir">
            <input placeholder="Search..">
            <p>Google</p>
            <p>Runoob</p>
            <p>Tabao</p>
            <p>Wiki</p>
            <p>Zhihu</p>
            <p>Tmall</p>
            <p>Weibo</p>
        </div>
    </body>
 css中：
	 .show{
   	 	display: none;
	  }
js中：
function mybu(){
    document.getElementById("neir").classList.toggle("show");
}

搜索

先看效果图：
在这里插入图片描述
代码如下：

//html中：
   <body>
        <input placeholder="搜索.." id="input" onkeyup="myinput()">
        <table id="mytable">
            <tr>
                <th>Name</th>
                <th>Url</th>
            </tr>
            <tr>
                <td>Google</td>
                <td>www.google.com</td>
            </tr>
            <tr>
                <td>Runoob</td>
                <td>www.runoob.com</td>
            </tr>
            <tr>
                <td>Taobao</td>
                <td>www.taobao.com</td>
            </tr>
            <tr>
                <td>Baidu</td>
                <td>www.baidu.com</td>
            </tr>
        </table>
    </body>
//js中：
 function myinput(){
    var s=document.getElementById("input").value.toUpperCase();
    var t=document.getElementById("mytable").getElementsByTagName("tr");
    for(var i=0;i<t.length;i++){
        var d=t[i].getElementsByTagName("td")[0];
        if(d){
            txtValue=d.textContent||d.innerText;
            if(txtValue.toUpperCase().indexOf(s)>-1){
                t[i].style.display="";
            }else{
                t[i].style.display="none";
            }
        } 
    }
}