前端实现打字机的效果 - 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小时内与您取得联系。

整合营销服务商