HTML 跑馬燈問題

html javascript

lingwu 2020-09-01 00:29:24 ‧ 2368 瀏覽

分享至

需要使用跑馬燈顯示現在的訊息
資料是用 $.getJSON的方法抓php
資料長這樣

現在顯示的資料都是正確的
而目前的問題是第一次顯示訊息時
第一個字碰到最左邊就會重頭從右邊開始跑
但跑第二次的時候又正常了
(正常:從右邊開始直到最後一個字都跑完才會再從右邊開始跑)
請問是哪邊有問題?

程式碼:

 <script>
$.getJSON('geojson.php', function (geojson) {
            var perfect = 0, good = 0;
       
            for (var i = 0; i < geojson.length; i++) {
                var apoche = parseFloat(geojson[i]["properties"]["pm25"]);
            
                if (apoche >= 0 && apoche < 15) { perfect++; }
                else if (apoche < 35 && apoche >= 15) { good++; }
               
               }
            var msg = "現在測站共" +perfect;
        
            document.getElementById("Hday").innerHTML = msg;
        });
      
    </script>
    <marquee direction="left" bgcolor=ffffcc width=50% crollamount="10">  <p id="Hday"></p></marquee>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

japhenchen

iT邦超人 1 級 ‧ 2020-09-01 07:23:06

marquee 過時Deprecated而且有相容性的問題，盡早改成CSS MARQUEE

JSFiddle

css部份

.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    height: 16px;
    display: block;
}
.marquee span {
    display: inline-block;
    text-indent: 0;
    overflow: hidden;
    -webkit-transition: 15s;
    transition: 15s;
    -webkit-animation: marquee 15s linear infinite;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% { transform: translate(100%, 0); -webkit-transform: translateX(100%); }
    100% { transform: translate(-100%, 0); -webkit-transform: translateX(-100%); }
}

HTML部份

<p class="marquee"><span>marquee 過時了而且有相容性的問題，盡早改成CSS MARQUEE</span></p>

回應 1
分享
檢舉

lingwu iT邦新手 5 級 ‧ 2020-09-01 23:48:51 檢舉

好的
謝謝你的回覆

登入發表回應

亞歷斯

iT邦新手 5 級 ‧ 2020-09-19 17:21:58

我是從 HTML5 開始學習網頁，未看過 marquee 這個標籤
於是 Google 了一下，發現有這麼一個彩蛋 XD

google search

正是 japhenchen 提到用 css animation 實作的效果：

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙