Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
easy-typer-js
Advanced tools
Very powerful JS typewriter plugin, compatible with native JS and MVVM class framework (Vue, React...), whatever you want to output.
Weekly downloads
Readme
功能十分强大打字机插件,兼容原生JS和MVVM类框架(Vue,React,angular),随心所欲的输出任何你想输出的内容。
与其他相似的打字机插件我们的有点在哪里?
=> 彭小呆的随笔杂谈 <=
easy-typer-js是一个轻量级的插件, 用于实现页面文字的打字机效果. 它使用起来非常简单, 只需要几行代码就能实现高大上的打字机效果.而且对MVVM框架支持完美,还兼容原生JS.
// 安装
npm install easy-typer-js --save
或者
yarn add easy-typer-js
// 引入
import EasyTyper from 'easy-typer-js'
// 实例化
const typed = new EasyTyper(obj, input, fn, hooks)
// 下载至本地
<script src="./easy-typer-js"></script>
//cdn导入
<script src="https://cdn.jsdelivr.net/npm/easy-typer-js@1.0.3/easy-typer-min.js"></script>
打开页面你会发现
黎明前的黑暗是最深不见底的黑暗!
这句话被一个一个字敲
出来!哇哦!是不是很炫酷!
const typing = new EasyTyper(obj, `黎明前的黑暗是最深不见底的黑暗!`,
instance => {
// 回调函数
// 此回调一般用于获取新的数据然后循环输出
// instance { 实例EasyTyper }
console.log(instance) // 打印出实例对象
}, (output, instance)=>{
// 钩子函数
// output { 当前帧的输出内容 }
// instance { 实例EasyTyper }
// 通过钩子函数动态更新dom元素
document.getElementById('output').innerHTML = `${output}`
})
打开页面你会发现
我将要被打字机输出
这句话被一个一个字敲
出来!
<template>
// 动态绑定
<div>{{ obj.output }}</div>
</template>
<script>
import EasyTyper from 'easy-typer-js'
export default {
name: 'home',
data() {
return {
obj: {
output: '',
// 其他参数省略
}
}
},
mounted() {
const typed = new EasyTyper(this.obj, `我将要被打字机输出`)
}
}
</script>
打开页面你会发现
我是被React所创造出来的!
这句话上帝所诉说!
import EasyTyper from 'easy-typer-js'
class showText extends React.Component {
constructor(props) {
super(props)
this.state = {
output: '',
typer: null
}
this.initTyper = this.initTyper.bind(this)
this.changeOutput = this.changeOutput.bind(this)
}
initTyper() {
// 配置对象
const obj = {
output: '',
isEnd: false,
speed: 80,
singleBack: false,
sleep: 0,
type: 'normal',
backSpeed: 40,
sentencePause: false
}
// 实例化
this.typer = new EasyTyper(obj, '我是被React所创造出来的!', this.completeAsentence, this.changeOutput)
}
// 输出完毕后的回调函数
completeAsentence() {
console.log('输出完毕!长官!')
}
// 钩子函数和setState结合
changeOutput(output) {
this.setState(state => ({
output: output
}))
}
render() {
return (
<p>{this.state.output}</p>
)
}
}
以下为完整代码!!!
<template>
<div>
{{ obj.output }}
<span class="easy-typed-cursor">|</span>
</div>
</template>
<script>
import EasyTyper from 'easy-typer-js'
export default {
name: 'home',
data() {
return {
obj: {
output: '',
isEnd: false,
speed: 80,
singleBack: false,
sleep: 0,
type: 'rollback',
backSpeed: 40,
sentencePause: false
}
}
},
mounted() {
this.init()
},
methods: {
// 初始化
init() {
this.fetchData()
},
fetchData() {
// 一言Api进行打字机循环输出效果
fetch('https://v1.hitokoto.cn')
.then(res => {
return res.json()
})
.then(({ hitokoto }) => {
this.initTyped(hitokoto)
.catch(err => {
console.error(err)
})
},
initTyped(input, fn, hooks) {
const obj = this.obj
const typed = new EasyTyper(obj, input, fn, hooks)
}
}
}
</script>
<style lang="stylus">
.typed-cursor
margin-left: 10px
opacity: 1
-webkit-animation: blink 0.7s infinite
-moz-animation: blink 0.7s infinite
animation: blink 0.7s infinite
@keyframes blink
0%
opacity: 1
50%
opacity: 0
100%
opacity: 1
@-webkit-keyframes blink
0%
opacity: 1
50%
opacity: 0
100%
opacity: 1
@-moz-keyframes blink
0%
opacity: 1
50%
opacity: 0
100%
opacity: 1
</style>
效果如下就是首页你们可以看到的啦!:pig:
sleep
设置为0时的效果import React from 'react'
import logo from './logo.svg'
import './App.css'
import EasyTyper from 'easy-typer-js'
class showText extends React.Component {
constructor(props) {
super(props)
this.state = {
output: '',
typer: null
}
this.initTyper = this.initTyper.bind(this)
this.changeOutput = this.changeOutput.bind(this)
}
componentDidMount() {
this.initTyper()
}
componentWillUnmount() {
this.typer.close()
}
initTyper() {
// 配置对象
const obj = {
output: '',
isEnd: false,
speed: 80,
singleBack: false,
sleep: 0,
type: 'normal',
backSpeed: 40,
sentencePause: false
}
// 实例化
this.typer = new EasyTyper(obj, '我是被React所创造出来的!', this.completeAsentence, this.changeOutput)
}
// 输出完毕后的回调函数
completeAsentence() {
console.log('输出完毕!长官!')
}
// 钩子函数和setState结合
changeOutput(output) {
this.setState(state => ({
output: output
}))
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>{this.state.output}</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
上帝
</a>
</header>
</div>
)
}
}
export default showText
效果如下
<div id="output"></div>
<script src="https://cdn.jsdelivr.net/npm/easy-typer-js@1.0.3/easy-typer-min.js"></script>
const obj = {
output: '', // 输出内容 使用MVVM框架时可以直接使用
type: 'normal',
isEnd: false,
speed: 80,
backSpeed: 40,
sleep: 3000,
singleBack: true,
sentencePause: false
}
const typing = new easyTyper(obj, `黎明前的黑暗是最深不见底的黑暗!`, (instance)=>{
// 回调函数 如果这里使用了递归调用会一直循环打印,需要在外部触发停止
// 此回调用于获取新的数据然后重新输出
instance.input = [`天不生我彭小呆,万古长青一生狂!`]
instance.play()
}, (output, instance)=>{
// 钩子函数,每一帧的数据获取和实例easy-typer-js的获取
document.getElementById('output').innerHTML = `${output}<span class="easy-typed-cursor">|</span>`
})
// 12秒后停止
let timer = setTimeout(() => {
clearTimeout(timer)
timer = null
typing.close()
alert('stop!')
}, 12000)
效果如下!!!
参数 | 说明 | 回调 | 是否必须 |
---|---|---|---|
obj | 配置对象 | 无 | 必须一定有且格式要对,十分严格,比起教导主任毫不逊色 |
input | 内容输入 | 无 | 可以没有,会有小彩蛋 |
fn | 完成一次output输出后的回调函数 | 当前easy-typer-js实例instance | 否 |
hooks | 钩子 钩在每一帧将要完成的时间片段上 | 当前帧输出的内容、当前easy-typer-js实例instance | 否 |
回调函数与钩子函数使用方法在上面都使用到了哦
参数(params) | 含义(meaning) | 类型(type) |
---|---|---|
output | 输出内容,使用MVVM框架时直接使用 { obj.output } | string |
type | 下一次的行为 'roolback', 'normal', 'custom' | string(有且仅有此三种) |
isEnd | 全局控制是否终止 | boolean |
speed | 打字速度 | number |
backSpeed | 回滚速度 | number |
sleep | 完整输出完一句话后,睡眠一定时间后触发回滚事件 | number |
singleBack | 单次的回滚(优先级高于type) | boolean |
sentencePause | 整个生命周期运行完毕后,句子是否暂停显示(仅在回滚模式下生效) | boolean |
obj配置对象校验非常严格,对象的字段和类型都要遵从以上格式,否则你会在控制台看到一个非常显眼的error! |
方法名 | 说明 | 参数 |
---|---|---|
close | 停止打字 | 无 |
sleep | 单独可以调用睡眠线程,可以使用在任何地方 | ms(毫秒) |
源码都在GitHub上开源了,可以自行查看,后续还会继续更新。
可以去Github查看我们的打字机源码,你会发现里面没有一行代码有涉及DOM操作的。
我们秉承一个概念,数据输入进来,我们拷贝一份数据,然后对数据进行解析,最后使用一个对象进行数据的输出!
如果这篇文章能够帮到你什么,希望能花一点时间帮我点个赞👍b( ̄▽ ̄)d。 =.=戳我点赞😊
const obj = {
// 其他省略
sentencePause: true // 最后一句将会暂停回滚,常显示下去
}
// 数组模式 根据顺序一句一句输出
const inputArr = [`黎明前的黑暗是最深不见底的黑暗!`, `世界上本没有无用的齿轮,只有齿轮自身能决定它的用途!`, `天不生我彭小呆,万古长青一生狂!`]
const typing = new EasyTyper(obj, inputArr, ()=>{
// 回调函数,easyTyper生命周期结束后执行
console.log('结束了,我的使命!')
}, (output, instance) => {
// 钩子函数,每一帧的数据获取和实例EasyTyper的获取
document.getElementById('output').innerHTML = `${output}`
})
jest
测试框架yarn test
FAQs
Very powerful JS typewriter plugin, compatible with native JS and MVVM class framework (Vue, React...), whatever you want to output.
The npm package easy-typer-js receives a total of 180 weekly downloads. As such, easy-typer-js popularity was classified as not popular.
We found that easy-typer-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.