前端實現打字機的效果 - typed庫的使用

示:

1.typed.js的介紹

typed.js是一個類型化庫，效果是用打字機的方式顯示一段話，可以自定義任何字符串、指定顯示速度、指定是否循環等

可以在此網站查看所有演示的Demo:

mattboldt.github.io/typed.js/

其實可以使用原生JS來實現這個效果，但是還是很麻煩的 typed.js是一個輕量級的JavaScript插件, 用于實現頁面文字的打字動畫效果這是一款輕量級，使用簡單，功能強大的插件

主要特點:

易于使用：通過簡單的配置，就可以在網頁上實現打字效果。
高度可配置：可以自定義打字速度、打字時間間隔、回退速度等。
多種模式：支持打字、刪除、打字后再刪除等不同的動畫模式。
無依賴：Typed.js 不依賴于任何第三方庫，可以直接在網頁上使用。
跨瀏覽器兼容：支持主流的瀏覽器，包括最新的版本。

2.typed.js的使用

2.1 安裝

使用包管理器進行安裝

 # With NPM
 npm install typed.js

 # With Yarn
 yarn add typed.js

使用cdn鏈接

 <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

2.2 使用

HTML部分

 <span id="typed" style="white-space: pre-wrap;line-height: 30px;"></span>

經過測試,文字放在span標簽里面，輸入的光標才會正常顯示。

JavaScript部分

 const options = {
   strings: [
     'First test.',
     'Second test, \nit will pause for three seconds. ^3000',
     "Second test, \nthe last sentence will go back to 'Second test, ', \noh no, this is the third test. ^1000",
     "It's going to start repeating.",
   ],
   typeSpeed: 50, // 打印速度
   startDelay: 300, // 開始之前的延遲300毫秒
   loop: true, // 是否循環
 };
 
 const typed = new Typed('#typed', options);

輸入暫停

 var typed = new Typed(".element", {
   // 鍵入“first”后等待1000毫秒
   strings: ["First ^1000 sentence.", "Second sentence."]
 });

智能退格

在下面的示例中，這只會在“This is a”之后退格。

 // 只退格與前一個字符串不匹配的內容
 var typed = new Typed(".element", {
   strings: ["This is a JavaScript library", "This is an ES6 module"],
   smartBackspace: true // Default value
 });

3. 配置項說明

 var typed = new Typed(".element", {
   /**
    * @property {array} strings 要鍵入的字符串
    * @property {string} stringsElement 包含字符串子元素的元素的ID
    */
   strings: ['These are the default values...', 'You know what you should do?', 'Use your own!', 'Have a great day!'],
   stringsElement: null,
 
   /**
    * @property {number} typeSpeed 輸入速度，以毫秒為單位
    */
   typeSpeed: 0,
 
   /**
    * @property {number} startDelay 鍵入之前的時間以毫秒開始
    */
   startDelay: 0,
 
   /**
    * @property {number} backSpeed 退格速度，以毫秒為單位
    */
   backSpeed: 0,
 
   /**
    * @property {boolean} smartBackspace 是否只退格與前一個字符串不匹配的內容
    */
   smartBackspace: true,
 
   /**
    * @property {boolean} shuffle 是否洗牌
    */
   shuffle: false,
 
   /**
    * @property {number} backDelay 退回之前的時間，以毫秒為單位
    */
   backDelay: 700,
 
   /**
    * @property {boolean} fadeOut 是否用淡出替代空格
    * @property {string} fadeOutClass 用于淡入淡出動畫的css類
    * @property {boolean} fadeOutDelay 以毫秒為單位淡出延遲
    */
   fadeOut: false,
   fadeOutClass: 'typed-fade-out',
   fadeOutDelay: 500,
 
   /**
    * @property {boolean} loop 是否循環字符串
    * @property {number} loopCount 循環次數
    */
   loop: false,
   loopCount: Infinity,
 
   /**
    * @property {boolean} showCursor 是否顯示光標
    * @property {string} cursorChar 光標的字符
    * @property {boolean} autoInsertCss 是否將光標和fadeOut的CSS插入HTML <head>
    */
   showCursor: true,
   cursorChar: '|',
   autoInsertCss: true,
 
   /**
    * @property {string} attr 輸入屬性
    * 例如：輸入占位符，值或僅HTML文本
    */
   attr: null,
 
   /**
    * @property {boolean} bindInputFocusEvents 如果el是文本輸入，則綁定到焦點和模糊
    */
   bindInputFocusEvents: false,
 ?
   /**
    * @property {string} contentType 明文的'html'或'null'
    */
   contentType: 'html',
 
   /**
    * 所有打字都已完成調用的回調函數
    * @param {Typed} self
    */
   onComplete: (self) => {},
 
   /**
    * 在鍵入每個字符串之前調用的回調函數
    * @param {number} arrayPos
    * @param {Typed} self
    */
   preStringTyped: (arrayPos, self) => {},
 
   /**
    * 輸入每個字符串后調用的回調函數
    * @param {number} arrayPos
    * @param {Typed} self
    */
   onStringTyped: (arrayPos, self) => {},
 
   /**
    * 在循環期間，在鍵入最后一個字符串之后調用的回調函數
    * @param {Typed} self
    */
   onLastStringBackspaced: (self) => {},
 
   /**
    * 打字已經停止調用的回調函數
    * @param {number} arrayPos
    * @param {Typed} self
    */
   onTypingPaused: (arrayPos, self) => {},
 
   /**
    * 停止后開始鍵入調用的回調函數
    * @param {number} arrayPos
    * @param {Typed} self
    */
   onTypingResumed: (arrayPos, self) => {},
 
   /**
    * 重置后調用的回調函數
    * @param {Typed} self
    */
   onReset: (self) => {},
 
   /**
    * 停止后調用的回調函數
    * @param {number} arrayPos
    * @param {Typed} self
    */
   onStop: (arrayPos, self) => {},
 
   /**
    * 開始后調用的回調函數
    * @param {number} arrayPos
    * @param {Typed} self
    */
   onStart: (arrayPos, self) => {},
 
   /**
    * 銷毀后調用的回調函數
    * @param {Typed} self
    */
   onDestroy: (self) => {}
 });

4. 個人練習Demo

html

    <span id="typed"></span>

css

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            background: rgb(34, 193, 195);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        span {
            font-size: 32px;
            font-weight: 600;
            white-space: pre-wrap; /* 保持空白和換行符，并自動換行 */
        }

       var typed = new Typed("#typed", {
            strings: ['我喜歡<span style="color:yellow">睡覺</span>', '我喜歡吃飯', '<span style="color:red">我喜歡自由</span>'],
            typeSpeed: 100,//打字的速度
            smartBackspace: true, // 開啟智能退格 默認false
            backSpeed: 50,//后退速度
            backDelay: 500,//后退延遲
            loop: true,//是否循環.,,
            startDelay: 1000,//起始時間
            fadeOut: true,//淡出效果
            fadeOutClass: 'typed-fade-out',//fadeOutClass 用于淡入淡出動畫的css類
            fadeOutDelay: 500,//以毫秒為單位淡出延遲
            smartBackspace: true, //智能后間距,

        });

實現效果就和文章一開始展現的碼上掘金那個效果一樣.

5. 結語

關于TypedJs庫 , 還有更多新的玩法, 大家可以根據上面提供的配置項.自己寫寫Demo 玩玩.

作者：心安事隨
鏈接：https://juejin.cn/post/7349752708385374262

般我們常見placeholder偽類選擇器用來修改默認樣式及文案，忽然發現placeholder-shown偽類選擇器，比較官方的解釋是

CSS偽類表示任何顯示占位符文本的form元素。

簡單來說就是當輸入框的placeholder內容顯示的時候，輸入框干嘛干嘛。

兼容性如下，在移動端沒什么問題

placeholder-show是如何工作的？

:placeholder-shown CSS 偽類在 <input> 或 <textarea> 元素顯示 placeholder text 時生效，簡單的說就是 placeholder 有值才生效，如下所示：

// html
<input placeholder="placeholder text" />
<textarea placeholder="placeholder text"></textarea>

// css 
input:placeholder-shown, textarea:placeholder-shown{ 
  border:1px solid pink;
}

如果 placeholder 為空 placeholder-show 就沒效果了：

// html
<input placeholder="" />
<textarea placeholder=" text"></textarea>

:placeholder-shown vs ::placeholder

我們可以使用:placeholder-shown設置input元素的樣式。

input:placeholder-shown {
  border: 1px solid pink;
  background: yellow;
  color: green;
}

注意一些奇怪的問題-我們設置 color: green，但沒有作用用。這是因為:placeholder-shown僅會針對input本身。對于實際的占位符文本，必須使用偽元素::placeholder。

input::placeholder {
  color: green;
}

?? 我注意到有一些其他的屬性，如果應用::placeholder-shown，也會影響placeholder的樣式。

input:placeholder-shown, textarea:placeholder-shown{ 
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 5px;
}

我也不知道這是啥情況，也許是因為這些屬性被placeholder繼承了，如果你知道原因，歡迎留言告訴我一下，謝謝。

:placeholder-shown vs :empty

:placeholder-shown是專門用于確定元素是否顯示占位符的對象，我們主要使用它來檢查input 內容是否為空（假設所有的input都有一個占位符）。這里你可能會想，使用 empty 也是可以的吧？我們來看看。

// html
<input value="not empty">
<input><!-- empty -->

// css
input:empty {
  border: 1px solid pink;
}

input {
  border: 1px solid black;
}

這里看似empty起作用了，因為我們看到的是粉紅色邊框，但這實際上不起作用

之所以顯示粉紅色，是因為偽類增加了 css 的權重。類似于類選擇器（即.form-input）比類型選擇器（即input）具有更高的權重。高權限選擇器將始終覆蓋低權重設置的樣式。

所以我們可以這樣說：不要使用:empty檢查輸入元素是否為空。

如果檢查 input 內容是否為空（在沒有點位符的情況下）？

我們檢查輸入是否為空的唯一方法是使用:placeholder-shown。但是如果我們的輸入元素沒有占位符會發生什么呢? 這里有個取巧的方法：傳入一個空字符串" "。

// html
<input placeholder=" "><!--  pass empty string -->

//css
input:placeholder-shown {
  border-color: pink;
}

組合其它選擇器

我們可以使用:not偽類對某些事物進行逆運算。在這里，我們可以在輸入不是空的情況下進行定位。

//html
<input placeholder="placeholder" value="not empty" />

// css
input:not(:placeholder-shown) {
  border: 1px solid green;
}

實戰

用placeholder-shown我們可以實現下面動效

具體代碼如下:

Html

<div class="input">
    <input class="input-fill" placeholder="郵箱">
    <label class="input-label">郵箱</label>
</div>

Css

.input{
   position: relative;
 }
.input-fill{
  border: 1px solid #ececec;
  outline: none;
  padding: 13px 16px 13px;
  font-size: 16px;
  line-height: 1.5;
  width: fit-content;
  border-radius: 5px;
}
.input-fill:placeholder-shown::placeholder {
  color: transparent;
}
.input-label {
  position: absolute;
  font-size: 16px;
  line-height: 1.5;
  left: 16px; top: 14px;
  color: #a2a9b6;
  padding: 0 2px;
  transform-origin: 0 0;
  pointer-events: none;
  transition: all .25s;
}
.input-fill:focus{
  border: 1px solid #2486ff;
}
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
  transform: scale(0.75) translate(0, -32px);
  background-color: #fff;
  color: #2486ff;
}

作者：Samantha Ming 譯者：前端小智來源：medium 原文：https://www.samanthaming.com/tidbits/88-css-placeholder-shown/

i，你好呀，我是May。

今天繼續跟大家分享游戲本地化常見的源文檔，PO文件~

（其實之前寫過一篇簡單的，這次更新為新內容~）

在進行游戲和應用程序本地化時，我們最常見的文檔是多語言Excel文檔，詳見。

此外，還有一種常見的語言包文檔，就是PO文件。

比如我在電腦一搜，就找到很多語言包的PO文檔，如剪映云的PO文件。

所以今天分享：如何翻譯多語言的PO文檔。

1. 認識應用程序本地化中的PO文本

PO是portable object (可跨平臺對象)的縮寫，可以被Java程序、GNU gettext或其他軟件程序作為屬性文件引用，是應用程序本地化時常見的文檔。

我的觀點還是：我們本地化人員不是程序員，不需要會寫，只要認識就行！

我們來以一個demo文檔認識一下，什么是PO文檔：

這里的例子我就用我下載好的剪映云自帶的PO文檔做案例了，如有侵權，聯系修改~

1.1 PO文件的數據結構

PO文件的數據結構長這樣。其中：

# 井號后面一般是注釋；
msgid ""——msgid空格引號，引號內是原文；
msgstr ""——msgstr空格引號，引號內是原文翻譯結束后的譯文的內容。

1.2 PO中的占位符

根據編程語言不同，原文可能會含有HTML樣式或其它占位符，翻譯時必須保留這些字符串。

1.3 句段的注釋

既然是注釋，也注釋的類型怎么區分呢？在PO中，具體的注釋類型由緊隨井號的字符決定，比如：

#—— 井號后面緊跟空格，是譯員的注釋；
#.——井號后面緊跟緊跟句點，是額外注釋，一般是從源代碼注釋生成；
#:—— 井號后面緊跟冒號，表明待翻譯語句的出處，一般標記源代碼文件及行數；
#,—— 井號后面緊跟逗號，一般是由編譯器生成的格式注釋。

1.4 上下文的場景

有時，同一個句子在不同的場景里要翻譯成不同的意思。所以為了區分上下文的場景，在PO文件中也會通過 msgctxt 字段，來明確句子在程序中的具體位置和含義。

1.5 單復數區分

對于有單復數的語言而言，PO支持設置單復數區分。

CCJK（簡中繁中日韓）是沒有單復數的，就不行~

那，這樣的文件如何翻譯呢？

2. memoQ如何幫助處理PO文檔

memoQ支持直接導入PO文件。

對于含有占位符或HTML樣式的文檔，還可以借助層疊過濾器實現。

層疊層疊嘛，第一層是PO gettext（也就是PO）過濾器，第二層是HTML過濾器，也可以再加一層正則表達式標注器。

2.1 PO gettext（也就是PO）過濾器，幫助解析不同列。

直接將文件導入至項目即可。

2.2 添加正則標注器，幫助處理字符串和非譯元素

如果原文中有想<color=yellow>和{PropName}或者 \n 這樣的字符串和非譯元素，需要再加一層正則表達式標注器，并設置正則定義方式。

——這樣的話原文中的非譯元素可以固定為標簽，譯員就不會誤翻譯。

Step 1：在導入項目時，使用“選擇性導入”;

Step 2：選擇好原文后，默認用的過濾器是PO gettext過濾器。因為原文有字符串，這里選擇“更改過濾器和配置”；

Step 3：添加一層正則表達式標注器，并設置正則定義方式；

Step 4：設置完成過濾器，保存層疊過濾器，以供下次使用。然后，點擊“確定”即可。

關于正則表達式如何寫

我寫過一篇應用程序本地化中常用字符串和正則表達式推薦，你可以來學習正則。

當然，memoQ自帶了一個tags and entities的標注器，內嵌了像 <color>這樣的標簽，也設置了哪些是開標簽哪些是關閉標簽，你也可以直接使用，還是不錯的。

3. 在memoQ中進行翻譯

導入完成文檔后，即可在memoQ中進行翻譯了。

在翻譯過程中，你會發現：

msgid中的原文就提取出來了，可以安心做翻譯；
下方還可以預覽原文和譯文。

4. 導出譯文

翻譯結束后，導出就OK啦。

導出譯文的操作可以參考。

這里用了機器翻譯的結果。

好啦，希望你上內容可以幫到你，有用可收藏~

特別說明：本文僅用于學術交流，如有侵權請后臺聯系小編刪除。

- END -

轉載來源：職業譯員玩轉翻譯技術

轉載編輯：李倩楠

在線咨詢

上一篇：小程序和H5中canvas卡頓的性能優化方向和實踐
下一篇：Vue實戰081：多HTML標簽元素如何實現并排顯示詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商