2. 程式人生 > >Vue 文字跑馬燈效果

Vue 文字跑馬燈效果

阿新 • • 發佈：2018-11-03

1. 話不多說 看程式碼

在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.5.17.js"></script>
  


</head>
<body>

<div id="app">

   <input type="button" value="開始"  v-bind:
 
disabled=isDisabl  @click="start">
    <input type="button" value="結束"  @click="stop">
    <br>
    {{good}}

</div>
<script>

   new Vue({
        el: "#app",
        data: {
            good: "好好學習，天天向上！！！",
            interval: null,
            isDisabl:false

        }
 
,
        methods: {
            start() {
                console.log(this.good);

                var _this = this;

                _this.interval = setInterval(function () {
                    //獲取第一個字元
                    var start = _this.good.substring(0, 1);
                    //得到後面的字元
                    var
 
 end = _this.good.substring(1);

                    _this.isDisabl=true;
                    //重新賦值
                    _this.good = end + start;
                }, 400)

            },
            stop: function () {

                //停止計時器
                this.isDisabl=false;
                clearInterval(this.interval);

            }
        }


    })

</script>

</body>
</html>

相關推薦

vue文字跑馬燈效果

star lis using obia dir ng- visible tick cdn https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({

Vue 文字跑馬燈效果

1. 話不多說 看程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

VUE之文字跑馬燈效果

文字 utf button doctype put inpu stop title set <!DOCTYPE html> Title <input type="button" value="浪起來"

微信小程式：公告字幕滾動播放（文字跑馬燈效果）

一、需求 公告文字僅限200字 公告內容僅限一行文字顯示 公告內容持續滾動 二、解決思路 使用動畫API（Animation.translate），完成移動動畫 使用定時器API（setInterval）,完成迴圈播放動畫 注

微信小程式-文字跑馬燈效果

效果如圖 WXML <scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view class=

微信小程式文字跑馬燈效果

WXML <scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view cla

文字跑馬燈效果程式碼

<TextView android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:textColor="@android:color/white"  android:focusable="tru

TextView文字跑馬燈效果

專案中要用到跑馬燈效果，如下： 雖說看起來挺簡單，但還是踩了好幾個坑，故此記錄一下。 剛開始的時候以為設定以下兩個引數就好： android:lines="1" android:ellipsize="marquee" “ellipsize”引數代

vue的跑馬燈效果製作

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑馬燈效果</title> <sc

微信小程式教程：文字跑馬燈效果

當你的微信小程式內容中出現文字跑馬燈效果，會不會覺得很拉風，接下來大家詳細講解下如何操作實現這效果。 效果： wxml <view>1 顯示完後再顯示</view> <view class="example">   <

VUE 回車換行提交表單 跑馬燈效果 只允許文字框中輸入0-9數字

匯入vue.js <script src="vue-2.5.17.js"></script> 1.回車換行 提交表單 <div id="app"> <input type="text" v-model=

Vue跑馬燈效果（es5）

<div id="app"> <button @click="go">走</button> <button @click="stop">停</button> <h3> {{msg}} </h3>

Android實現textview文字滾動顯示（跑馬燈效果）

自定義Textview並對其進行改造,主要目的是讓textview獲取焦點，這樣文字才能滾動起來 public class MyTextView extends android.support.v7

adnroid textview設定文字橫向自動滾動（跑馬燈效果）

關於textview設定文字橫向自動滾動（跑馬燈效果）文章，雖然網上有，但我看了下，描述的正確的只有一篇，因為我覺得自己再寫一篇，方便自己和大家以後方便使用 先上效果圖： 程式碼如下： &

Android中對文字實現跑馬燈效果

關於在Android中文字實現跑馬燈效果 方法一：（只能實現單個TextView的跑馬燈效果） android:singleLine=”true”只能單行，超出的文字顯示為”…” android:

android 文字超出控制元件寬度時,自動滾動顯示,類似跑馬燈效果

1.自定義控制元件 自定義RollTextView 繼承TextView,重寫 isFocused(),返回為ture 即可; public class RollTextView extends TextView { public RollTextV

簡單的跑馬燈效果（輪播圖）

font script meta 圖片 ive abs height 單單 none 邏輯簡介：想要圖片或者是文字向左移動，那肯定得用到定時器，那麽移動那就必然是距離左邊的left值在改變；核心問題就是通過定時器來改變ul距離left的值；本姑娘就是簡簡單單直直接接，上代碼

Android 開發筆記___textvieww__跑馬燈效果

support ota 效果 utf bundle per ack top ddl 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://sche

TextView的跑馬燈效果（AS開發實戰第二章學習筆記）

color clas eat star log ble _for ellipsize ddl TextView的跑馬燈效果跑馬燈用到的屬性與方法說明singleLine 指定文本是否單行顯示ellipsize 指定文本超出範圍後的省略方式focusable 指定是否獲得焦點

TextView的跑馬燈效果

焦點 包括 效果 avi gpo textview 跑馬燈 nbsp lips TextView的gravity屬性可以指定文本的對齊方式 跑馬燈的實現： 1.singleLine設置為true 2.ellipsize（文本超出後的省略方式，包括start、middle