【JavaScript】setlntval函数和内置类..

转x33g5p2x  于2022-02-07 转载在 JavaScript  
字(6.0k)|赞(0)|评价(0)|浏览(561)

去除前后空白trim

复选框的全选和取消全选

获取系统当前时间

获取毫秒数

周期函数setInterval

内置支持类Array

join方法链接

反转数组：reverse()

BOM编程

window中open和close方法

消息框弹出（alert、confirm）

history和location对象

去除前后空白trim

  1. <script type="text/javascript">
  2.   window.onload=function(){
  3.     document.getElementById("btn").onclick=function(){
  4.      var value=document.getElementById("username").value;  
  5.      var newValue=value.trim();
  6.       alert("--->"+newValue+"<----")
  7.     }
  8.   
  9.   }
  11. </script>
  12.  <input type="text" id="username">
  13. <input type="button" id="btn" value="按钮">

效果：

在IE8不支持trim，所以可以使用prototype扩展这个函数。如

  1. //给String扩展trim
  2. <script type="text/java">
  3.   String.prototype.trim=function(){
  4.     alert("调用自己写的trim");
  5. //正则对象:/.../
  6.    //return this.replace(/^\s+/,"").replace(/\s+$/,"");
  7.    return this.replace(/^\s+|\s+$/g,"");
  8.   }
  10. </script>

小test

表单验证:
(1)用户名不能为空
(2)用户名必须在6-14位之间
(3)用户名只能有数字和字母组成，不能含有其它符号(正则表达式)
(4)密码和确认密码一致，邮箱址址合法。
(5)统一失去焦点验证
(6)错误提示信息统一在span标签中提示，并且要求字体12号，红色。
(7)文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
(8)最终表单中所有项均合法方可提交

复选框的全选和取消全选

  1. <script type="text/javascript">
  2.         window.onload =function(){
  3.             //给每个复选框绑onclick事件
  4.             var firstChk =document.getElementById("firstChk");
  5.             firstChk.onclick =function(){
  6.             //根据name获得那个值
  7.               aihaos = document.getElementsByName("aihao");
  8.             // 
  9.                 for(var i =0; i<aihaos.length; i++){
  10.                     aihaos[i].checked =firstChk.checked;
  11.             
  12.                 }
  13.             }
  14.             var all=aihaos.length;
  15.             for(var i = 0; i < aihaos.length; i++){
  16.                 aihaos[i].onclick =function(){
  17.                 var checkedCount =0;
  18.                 //  总数量和选中的数量相等的时候，第一个复选框选中
  19.                     for(var i = 0; i<aihaos.length; i++){
  20.                             if(aihaos[i].checked){
  21.                             checkedCount++;
  22.                         }
  23.                     }
  24.                         firstChk.checked =(all== checkedCount);
  25.                         /*
  26.                         if(all ==checkedCount){
  27.                         firstChk.checked =true;
  28.                         } else{
  29.                         firstChk.checked =false;}*/
  30.                    
  31.                  }
  32.            }
  33.        }
  34.    </script>
  35.      <input type="checkbox" id="firstChk"/><br>
  36.       <input type="checkbox" name="aihao" value="smoke"/>抽烟<br>
  37.       <input type="checkbox" name="aihao" value="drink"/>喝酒<br>
  38.         <input type="checkbox" name="aihao" value="tt"/>烫头<br>

 获取系统当前时间

js中的内置支持类Date,可以用来获取时间/日期

  1. <script type="text/javascript">
  2. //创建Date对象
  3.   var nowTime=new Date();
  4. //输出，这个的等价于java中的sout
  5. document.write(nowTime);
  6. </script>

运行结果：

我们发现这个格式不太对头，可以用转换成具有本地语言的日期格式

  1. var nowTime=new Date();
  2. nowTime=nowTime.toLocaleString();
  3. //输出
  4. document.write(nowTime);

运行结果：

js中的换行，在script中不能直接写br。

  1. document.write("<br>")

获取毫秒数

重点：获取的毫秒数是从(1970年1月1日 00:00:00  000毫秒到到当前系统时间的总毫秒数)

  1. <script type="text/javascript">
  2. var t=new Date();
  3. var times=t.getTime();//一般会使用当前毫秒数当做时间戳
  4. document.write(times);
  5. //document.write(new Date().getTime);//简约一句
  6. </script>

运行结果：

 周期函数setInterval

  1. <script type= text/javascript>
  2.       function displayTime(){
  3.         var time = new Date();
  4.         var strTime =time.toLocaleString();
  5.         document.getElementById("timeDiv").innerHTML=strTime;
  6.     }
  7.       //每隔1秒调用displayTime()函数 
  8.       function start(){
  9.           //从这行代码执行结束开始,则会不间断的，每隔1000毫秒调用一次displayTime()函数。
  10.          //它的返回值可以传递给clearInterval从而取消code周期执行的值
  11.          v=window.setInterval("displayTime()",1000);
  12.       }
  13.          //让时间停下
  14.       function stop() {
  15.         window.clearInterval(v);
  16.         
  17.       }
  18.       </script>
  19.       <br><br>
  20.       <input type="button" value="显示系统时间" onclick="start();"/>
  21.       <input type="button" value="系统时间停止" onclick="stop();"/>
  22.       <div id="timeDiv"></div>

 内置支持类Array

创建数组

  1. //创建长度为0的数组
  2. var arr=[];
  3. //求数组长度
  4. arr.length

数组数组类型没有限制

  1. var arr2=[1,false,true,"kongchao",null];

遍历数组,输出在网页上

  1. for(var i=0;i<arr.length;i++){
  2.    document.write(arr[i]+"<br>");
  3. }

数组不会越界

如arr中长度有5，直接arr[7]=true;则会

  1. var arr=[1,false,true,"kongchao",null];
  2. arr[7]=true;
  3. for(var i=0;i<arr.length;i++){
  4.    document.write(arr[i]+"<br>");
  5. }

** 另一种创建数组的方式**

  1. var arr =new Array();//创建数组长度为0
  1. var arr =new Array(5);//创建数组长度为5
  1. var arr =new Array(1,2);//创建数组长度为2,表示其中有两个值1,2

 join方法链接

**join方法将变成字符串，用参数链接起来 **

  1. var a = [1,2,3,9];
  2. var str =a.join("-");
  3.  alert(str);//"1-2-3-9"

  1. //在数组的末尾添加一个元素(数组长度+1)
  2. var a = [1,2,3,9];
  3.  a.push(10);
  4.  alert(a.join("-"));
  5. //将数组末尾的元素弹出 
  6. var endElt =a.pop();
  7.  alert(endElt);

js中数组可以模拟栈的数据结构，先进后出原则

push();压栈

pop();弹栈

反转数组：reverse()

  1. //反转数组
  2. var a = [1,2,3,9];
  3.  a.reverse();
  4. var str =a.join("-");
  5.  alert(str);

BOM编程

window中open和close方法

  1. <input type="button" value="开启百度" onclick="window.open('http://www.baidu.com')"
  1. //新窗口开启
  2. <input type="button" value="开启百度" onclick="window.open('http://www.baidu.com',_blank)"
  3. //父窗口开启
  4. <input type="button" value="父窗口开启百度" onclick="window.open('http://www.baidu.com',_parent)";
  5. //顶级窗口
  6. <input type="button" value="顶级窗口开启百度" onclick="window.open('http://www.baidu.com',_top)"

打开1-open.html文件

  1. <input type="button" value="打开表单验证" onclick="window.open('1-open.html')")>

关闭当前窗口

  1. <input type="button" value="关闭当前窗口" onclick="window.close();">

消息框弹出（alert、confirm）

confirm有返回值，确认框中点确定返回true，点取消返回false

  1. window.confirm();//弹出消息确认框
  2. window.alert();

示例：

  1. <script text/javasctipt>
  2.     function again(){
  3.       if(window.confirm("你确定要删除这数据？？")){
  4.         alert("delete date..") 
  5.       }
  6.    }
  7.    </script>

history和location对象

history

  1. //后退
  2. <input type="button" value="后退" onclick="window.history.back()">
  3. //后退
  4. <input type="button" value="后退" onclick="window.history.go(-1)">
  5. //前进
  6. <input type="button" value="后退" onclick="window.history.go(1)">

location

location获取地址栏

  1. <script type="text/javascript">
  2.     function goBaidu(){
  3.     // var location0bj=window.location;//写法1
  4.     // locationObj.href="http://www.baidu.com";
  5.     
  6.       window .location.href ="http://www.jd.com";//写法2
  7.       //window.location="http://www.126.com";
  8.       
  10.       //  document.location.href ="http://www.sina.com.cn"; //写法3
  11.       // document.location="http://www.tmall.com";
  12.     }
  13.     </script>
  14.     <input type="button" value="百度" onclick="goBaidu();"/>

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/weixin_60719453/article/details/122519319

内容来源于网络，如有侵权，请联系作者删除！

vue.jsJavaScriptelementui深入浅出学JS

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com