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

最新推荐文章于 2024-05-17 20:15:03 发布

赵博林

最新推荐文章于 2024-05-17 20:15:03 发布

阅读量1.7k

点赞数 4

分类专栏： vue.js HTML+CSS 文章标签： javascript vue html5

本文链接：https://blog.csdn.net/SoULikeMe/article/details/106796686

版权

vue.js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

HTML+CSS

1 篇文章 0 订阅

订阅专栏

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(1，4))

输出结果如下：

ell

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

1. HTML 走马灯标签

<marquee>滚动的内容</marquee>

标签内可用参数:

direction : 表示滚动的方向，值可以是left，right，up，down，默认为left
behavior : 表示滚动的方式，值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
loop : 表示循环的次数，值是正整数，默认为无限循环
scrollamount : 表示运动速度，值是正整数，默认为6
scrolldelay : 表示停顿时间，值是正整数，默认为0，单位是毫秒
align : 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
bgcolor : 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
height、width : 表示运动区域的高度和宽度，值是正整数(单位是像素)或百分数，默认width=100% height为标签内元素的高度。
hspace、vspace : 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
οnmοuseοver=this.stop() οnmοuseοut=this.start() : 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

2. vue实现跑马灯实例

<!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需要改为自己的地址。

赵博林

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
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.substrin
复制链接

扫一扫