substring用法及vue中走马灯效果的实现

1.概述

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

2.作用及语法

stringObject.substring(start,stop)

参数 属性
start 必须
stop 可选

注意
二者都是非负整数(0,1,2,3,4…)

3.实例

1.括号中只有一个start参数时:

<script type="text/javascript">
var str="Hello world!"
document.write(str.substring(3))
</script>

输出结果如下:

lo world!

前三个字符Hel 被截取掉了,只剩下lo world!

2.括号中有两个参数时:

var str="Hello world!"
console.log(str.substring(14))

输出结果如下:

ell

截取的是第2,3,4个字符,以此类推

跑马灯实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{msg}}</p>
      <button @click="lang">浪起来</button>
      <button @click="stop">低调</button>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          msg: '猥琐发育,别浪~~!',
          intervalId: null, //在data上定义,定时器id
        },
        methods: {
          lang() {
            // console.log(this.msg);
            // var _this = this;

            if (this.intervalId != null) return; //判断语句

            this.intervalId = setInterval(() => {
              //获取到第一个字符
              var start = this.msg.substring(0, 1);
              //获取到后面的所有字符;
              var end = this.msg.substring(1);
              //字符串重新拼接
              this.msg = end + start;
            }, 200);
          },
          stop() {
            //停止计时器
            clearInterval(this.intervalId);
            //每次清除定时器后,重新赋值null
            this.intervalId = null;
            //开多个定时器,跑马灯变快,但是,就停不下来了。。需要加一个判断语句,每次清楚定时器就要重新赋值
          },
        },
      });
    </script>
  </body>
</html>

案例总结
1.用到了es6的箭头函数,解决了函数内部的this指向问题。
2.定时器的运用:

setInterval(fn(){ 方法 },200)

用法实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮,等待 2 秒会弹出 "Hello"</p>
<p>在弹出的对话框中点击 “确定”, 2 秒后会继续弹出。如此循环下去...</p>
<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    setInterval(function(){ alert("Hello"); }, 2000);
}
</script>

</body>
</html>

3.vue.min.js需要改为自己的地址。

你可能感兴趣的:(vue.js,JS,javascript,vue)