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

简介: ​目录去除前后空白trim复选框的全选和取消全选 获取系统当前时间 周期函数setInterval 内置支持类Array

BOM编程

消息框弹出(alert、confirm)

history和location对象

去除前后空白trim

document.getElementById("btn").onclick=function(){
 var value=document.getElementById("username").value;  
 var newValue=value.trim();
  alert("--->"+newValue+"<----")
}

}




效果:

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

//给String扩展trim

alert("调用自己写的trim");

//正则对象:/.../
//return this.replace(/^\s+/,"").replace(/\s+$/,"");
return this.replace(/^\s+|\s+$/g,"");
}


小test

复选框的全选和取消全选

    window.onload =function(){
        //给每个复选框绑onclick事件
        var firstChk =document.getElementById("firstChk");
        firstChk.onclick =function(){
        //根据name获得那个值
          aihaos = document.getElementsByName("aihao");
        // 
            for(var i =0; i<aihaos.length; i++){
                aihaos[i].checked =firstChk.checked;
        
            }
        }
        var all=aihaos.length;
        for(var i = 0; i < aihaos.length; i++){
            aihaos[i].onclick =function(){
            var checkedCount =0;
            //  总数量和选中的数量相等的时候,第一个复选框选中
                for(var i = 0; i<aihaos.length; i++){
                        if(aihaos[i].checked){
                        checkedCount++;
                    }
                }
                    firstChk.checked =(all== checkedCount);
                    /*
                    if(all ==checkedCount){
                    firstChk.checked =true;
                    } else{
                    firstChk.checked =false;}*/
               
             }
       }
   }

 <input type="checkbox" id="firstChk"/><br>
  <input type="checkbox" name="aihao" value="smoke"/>抽烟<br>
  <input type="checkbox" name="aihao" value="drink"/>喝酒<br>
    <input type="checkbox" name="aihao" value="tt"/>烫头<br> 

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


运行结果:

var nowTime=new Date();
nowTime=nowTime.toLocaleString();
//输出
document.write(nowTime);
运行结果:

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

document.write("
")
获取毫秒数


 运行结果:

 周期函数setInterval

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

 内置支持类Array

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

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

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

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

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

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

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

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

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

BOM编程
window中open和close方法
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com')"
//新窗口开启
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com',_blank)"
//父窗口开启
<input type="button" value="父窗口开启百度" onclick="window.open('http://www.baidu.com',_parent)";
//顶级窗口
<input type="button" value="顶级窗口开启百度" onclick="window.open('http://www.baidu.com',_top)"


关闭当前窗口


消息框弹出(alert、confirm)

window.confirm();//弹出消息确认框
window.alert();
 示例:

function again(){
  if(window.confirm("你确定要删除这数据??")){
    alert("delete date..") 
  }

}

history和location对象
history

//后退

//后退

//前进

location

location获取地址栏

function goBaidu(){
// var location0bj=window.location;//写法1
// locationObj.href="http://www.baidu.com";

  window .location.href ="http://www.jd.com";//写法2
  //window.location="http://www.126.com";
  

  //  document.location.href ="http://www.sina.com.cn"; //写法3
  // document.location="http://www.tmall.com";
}
</script>
<input type="button" value="百度" onclick="goBaidu();"/>

目录
相关文章
|
17天前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
63 32
|
3月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
57 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
3月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
4月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
4月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
4月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
65 4
|
4月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
47 5
|
4月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
48 2
|
4月前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
33 3
|
4月前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
91 0

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    47
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57