js 定时器、js string对象 方法

1.定时器

setInterval（）

• 每隔一段时间执行一次。 可能会执行很多次。
• 格式：setInterval（“要执行的函数”，每隔多久执行一次的时间）;
• 返回值：系统默认分配的定时器的编号ID。

setTimeout（）

• 延迟一段时间之后执行。 只会执行一次。
• 格式：setTimeout(函数，延迟时间)

【注意】函数只写函数名，不要写（）。如果写小括号，表示将这个函数执行，并把执行的结果作为参数传给settimeout。

关闭定时器的方法

• clearInterval(定时器的ID)

例

    var i = 0;
    var timer = setInterval(function () {
      i++;
      console.log("这是第" + i + "次执行");  //这是第n次执行  会执行10次
      if (i == 10) {
        clearInterval(timer);
      }
    }, 1000);
    //-------------------------------------------------------------------------------------------------
    var date = new Date();
    console.log(date);    //Wed Jun 02 2021 20:26:54 GMT+0800 (中国标准时间)
    setTimeout(hello, 2000);
    function hello() {
      var d1 = new Date();
      console.log(d1);    //Wed Jun 02 2021 20:26:56 GMT+0800 (中国标准时间)   相对于data延迟3秒输出
      console.log("hello word");  //hello word
    }

2.String对象

• ECMAScript 为我们提供了3个特殊的复杂数据类型：Boolean，Number和String。
• js内置的对象，用来包装基础数据类型。为了让我们更方便的去操作基础数据类型， 因为这三个对象提供了一些属性和方法。

• String对象

• 字符串的创建

• 字面量的方式创建：var str = “hello,word”;
• 内置构造函数创建：var str = new String(“hello,word”)

• 属性：

• length：字符串的长度。

方法：

charAt(索引) 重点

• 返回值：该索引位置的字符。

charCodeAt(索引)

• 返回值：该索引位置的字符的UFT-8编码。

substr(开始索引，多少个)

• 功能：截取字符串。从开始索引截取n个。
• 不会对原数组操作影响。

substring(开始索引，结束索引)

• 功能：截取字符串，从开始索引开始截取，到结束索引停止截取。（含头不含尾）
• 不会对原数组操作影响。

toLocaleLowerCase()

• 作用：将大写字母转小写。
• 返回值：转换结束的字符串。
  ###.toUpperCase()
• 作用：将小写字母转大写。
• 返回值：转换结束的字符串。

replace(’被替换的字符‘，’替换的字符‘) 重点

• 作用：将字符串中一些字符，替换成另一些字符。只会替换第一个。
• 返回值：替换好的字符串。

concat(字符串)

• 作用：拼接字符串

slice(开始索引，结束索引) 重点

• 含头不含尾
• 功能：截取字符串
• 与substring的区别在于，slice使用负整数时，表示length+负整数。

split(分隔字符，【多少个】) 重点

• 功能：分隔字符串
• 参数：
• 第一个为分隔符，表示按照哪个字符对字符串进行分隔。
• 第二个参数可选，表示分隔好的字符，返回多少个。 不写，默认返回全部
• 返回值： 数组。

indexOf(字符串片段，【开始查询的索引】) 重点

• 作用：在字符串中查找指定的字符串片段，
• 返回值：如果找到，返回首字符的索引，没有找到，返回-1.

includes(字符串片段) 重点

• 作用：查找字符串中是否包含该字符串片段。
• 返回值：布尔值，包含就返回true，不包含就false.

trim() 重点

• 作用：去除首尾空格。
• 返回值：去除空格后的字符串

padStart(目标长度，填充字符);

• 作用：从前面开始补齐字符串。
• 参数：

• 第一个表示你要将现有的字符串的长度补充到多少。
• 第二个参数表示你要用什么字符去补齐。

• 返回值:补齐后的字符串，不会对原有的字符串造成影响。

padEnd(目标长度，填充字符)

• 作用：从后面开始补齐字符串。

startsWith(字符串片段)

• 作用：判断该字符串是不是以传入的字符串片段开头的。
• 返回值：布尔值。

endsWith(字符串片段)

• 作用：判断该字符串是不是以传入的字符串片段结尾的。
• 返回值：布尔值。

【注意】当我们使用基础数据类型时，如果用到它对应的包装对象的属性或者方法时，js会自动将其转为包装对象。使用完成之后，再讲其转为基础数据类型。 基础数据类型也可以使用它对应的包装类型的属性和方法。

例

    var str = "Death is like WIND，always by my side23";
    var str2 = new String("我是内置构造函数创建的对象");
    console.log(str);    //Death is like WIND，always by my side23
    console.log(str2 + "");    //03String对象.html:82 我是内置构造函数创建的对象
    console.log(typeof str);   //string
    console.log(typeof str2);  //object 
    //---------------------------------------------------------------------------------------------------
    var str = "Death is like WIND，always by my side23";
    var str2 = new String("我是内置构造函数创建的对象");
    console.log(str.length);   //38
    console.log(str2.length);  //13
    //---------------------------------------------------------------------------------------------------
    var str = "Death is like WIND，always by my side23";
    var str2 = new String("我是内置构造函数创建的对象");
    console.log(str2[str2.length - 1]);
    for (var i = 0; i < str2.length; i++) {
      console.log(str2[i]);   //象 我 是 内 置 构 造 函 数 创 建 的 对 象
    }
    console.log(str.charAt(3));   //t
    console.log(str[3]);     //t
    //---------------------------------------------------------------------------------------------------
    var str = "Death is like WIND，always by my side23";
    console.log(str.charCodeAt(3));  //116
    //---------------------------------------------------------------------------------------------------
    var str = "Death is like WIND，always by my side23";
    console.log(str.substr(3, 10));   //th is like
    console.log(str);   //Death is like WIND，always by my side23
    //---------------------------------------------------------------------------------------------------
    var str = "Death is like WIND，always by my side23";
    console.log(str.substring(3, 10));  //th is l
    console.log(str);  //Death is like WIND，always by my side23
    //---------------------------------------------------------------------------------------------------
    var str = "Death is like WIND，always by my side23";
    console.log(str.toLocaleLowerCase());  //death is like wind，always by my side23
    console.log(str.toUpperCase());  //DEATH IS LIKE WIND，ALWAYS BY MY SIDE23
    //---------------------------------------------------------------------------------------------------
    var str = "Death is like WIND，always by my side23";
    console.log(str.replace("a", "b"));  //Debth is like WIND，always by my side23
    //---------------------------------------------------------------------------------------------------
    var str = "Death is like WIND，always by my side23";
    console.log(str.concat("死亡如风，常伴吾身"));  //Death is like WIND，always by my side23死亡如风，常伴吾身
    //---------------------------------------------------------------------------------------------------
    var str = "Death is like WIND，always by my side23";
    var str2 = new String("我是内置构造函数创建的对象");
    console.log(str.substring(5, -10));  //Death
    console.log(str2.slice(3, -5));  //置构造函数
    console.log(str2);  //03String对象.html:125 String {"我是内置构造函数创建的对象"}
    //---------------------------------------------------------------------------------------------------
    var str = "Death is like WIND，always by my side23";
    console.log(str.split("a"));  //["De", "th is like WIND，", "lw", "ys by my side23"]
    console.log(str);  //Death is like WIND，always by my side23
    var str = "Death is like WIND，always by my side";
    console.log(str.indexOf("isa"));  //-1
    //-------------------------------------------------------------------------------------------------------
    var str = "Death is like WIND，always by my side";
    console.log(str.includes("is"));  //true
    //-------------------------------------------------------------------------------------------------------
    var str = "     Death is like WIND，always by my side  ";
    console.log(str.trim());  //Death is like WIND，always by my side
    console.log(str);   //     Death is like WIND，always by my side
    //-------------------------------------------------------------------------------------------------------
    var str2 = "aabb";
    console.log(str2.padStart(8, "cdasd"));  //cdasaabb
    console.log(str2);    //aabb
    console.log(str2.padEnd(8, "cdasd"));  //aabbcdas
    //-------------------------------------------------------------------------------------------------------
    var str2 = "aabb";
    console.log(str2.startsWith("a"));  //true
    console.log(str2.endsWith("abba"));  //false

---

案例练习

  <style>
    .time {
      margin-top: 200px;
      text-align: center;
    }
  </style>
  <script src="js/until.js"></script>
</head>
<body>
  <h1 class="time"></h1>
  <!-- 在页面中实时显示当前时间,类似时钟效果.
    1.要获取h1标签
    2.启动定时器
    3.获取当前时间,格式化.
    4.将当前时间写入到h1标签中.
  -->

<script>
  // 1.获取h1标签。 
  var time = document.getElementsByClassName("time")[0];
  //2.启动定时器
  var t1 = setInterval(getTime, 1000);   //延迟1秒后显示
  function getTime() {
    // 3.获取当前时间
    var date = new Date();
    // 格式化时间，获得格式化之后的时间字符串
    var dateStr = showTime(date);
    //4.将当前时间写入到h1标签中。
    time.innerHTML = dateStr;
  }

• 引入到HTML页面中

// 自定义日期格式化方法   
// 输出 2021年4月22日 星期四 14:24:30
function showTime(date) {
  // 2、获取年份
  var year = date.getFullYear();
  //3. 获取月份
  var mon = date.getMonth() + 1;
  //4.获取日份
  var day = date.getDate();
  //5.获取小时数
  var h = date.getHours();
  //6.获取分钟数
  var min = date.getMinutes();
  //7.获取秒数
  var sec = date.getSeconds();
  //8.获取星期几
  var week = date.getDay();
  week = num2Chinese(week);

  var str = year + "年" + mon + "月" + day + "日 星期" + week + " " + addZero(h) + ":" + addZero(min) + ":" + addZero(sec);
  return str;
}
// 专门用来将数字转大写中文的。
function num2Chinese(num) {
  // 程序中，星期日返回的是0，所以必须将日放在最前面。
  var arr = ['日', '一', '二', '三', '四', '五', '六'];
  return arr[num];
}
// 补0
function addZero(num) {
  if (num < 10) {
    return "0" + num;
  } else {
    return num;
  }
}