input placeholder信息输入效果

请叫我海龟先生 等级 1656 0 0
标签: placeholderinput

可能经常会在某些新闻或视频网站的搜索框看到类似打字机的效果,咋眼一看好像很简单,但是一些又说不上具体细节,如下图

input placeholder信息输入效果 一眼一看,这不动态改变 placeholder 的值就好了吗?仔细看人家还有一个类似光标的东西呢,其实也简单,在拼接的时候再拼接个 | 不就好了吗?

代码如下:

const input = document.getElementById('input')

        let str = '女子否认拔病人尿管女子否认拔病人尿管'
        let str2 = ''
        let strArr = str.split('')
       // 也可以用 Array.prototype.slice.call(str) 将字符串转为数组

        let number = 0
        let timer = null

        function add(arr,time = 1000) {
            timer =  setInterval(() => {
                if(timer && number == strArr.length) {
                    clearInterval(timer)
                    timer = null
                    return
                }
                str2 += `${arr[number]}`

                input.placeholder = str2 +  (number ==  (strArr.length - 1) ?  '' : '|')
                number++
            },time)
        }
        add(strArr,140)

主要的思路就是将 新闻字符串分割为数组,通过定时器去不断组装的 placeholder,只需注意在在其末尾 添加 |,和最后一个时取消拼接就好了。

主要还是解决问题的思路,遇到问题多观察,就能发现人家是怎么做的,找到好的解决方案

收藏
评论区

相关推荐

vue 中mintui的filed实现blur 和focus 事件
先上代码块 language <mtfield class"form_rt" :disabled"fromLBT" placeholder"请输入代理机构代码" disableClear vmodel"fakeData.agencyCode" :attr"{ maxlength: 20 }" @blur.native.capture"
「小程序 — 云开发」搜索跳转
样式如图:在home.wxml中 js< confirmtype:键盘的右下角按钮显示'搜素'bindconfirm:按下键盘'搜索'按钮bindinput:在输入框输入过程中触发事件bindtap:点击搜索图标<view class"search" <input type"text" placeholder"搜索菜品" con
input placeholder信息输入效果
可能经常会在某些新闻或视频网站的搜索框看到类似打字机的效果,咋眼一看好像很简单,但是一些又说不上具体细节,如下图一眼一看,这不动态改变 placeholder 的值就好了吗?仔细看人家还有一个类似光标的东西呢,其实也简单,在拼接的时候再拼接个 | 不就好了吗?代码如下:javascriptconst input document.getElementByI
PHP自定义 日期范围 条件筛选
Html: <div class\="layui-inline"\> <label class\="layui-form-label"\>登录时间:</label\> <div class\="layui-input-inline" style\="width: 140px;"\> <input type\="date" name\="date
HTML5的表单input元素的新属性
        知识点 《HTML5的表单input元素的新属性》,留待学习分享。。。 <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus:自动获取焦点 Form:所属表单 Required:必填 Pattern:验证input的模式 placeholder:提示 \-->
18 个 JavaScript 入门技巧!(含2020JavaScript面试题整理)
1\. 转字符串 -------- const input = 123; console.log(input + ''); // '123' console.log(String(input)); // '123' console.log(input.toString()); // '123'
301. Remove Invalid Parentheses去除不符合匹配规则的括号
[抄题]: Remove the minimum number of invalid parentheses in order to make the input string valid. Return all possible results. Note: The input string may contain letters other than
From表单提交的几种方式
<body> <form action="https://my.oschina.net/u/3285916" method="get" name="formOne" id="formId"> name:<input type="text" name="name"> pwd:<input typ
HTML5新增input标签属性
一. input type属性 1 <form action=""> 2 邮箱<input type="email" name="" id=""> <input type="submit" value="提交"><br /><br /> 3 手机号码<input type="tel" name=
Python——Day1(笔记代码)
#print('Hello World') """ n1=input('请输入用户名:') print(n1) n2=input('请输入密码:') print(n2) """ """ n1 = "alex" n2 = "root" print(n1+'\\t'+n2) print(n2) """ """
Quill Editor使用公式
const katex = require('katex'); const win: any = window; win.katex = katex; 首先,引入katex @import '~katex/dist/katex.css'; 然后,引入katex.css editorConfig = {
ReactNative遇到的坑总结(持续更新)
**问题:在Android中 input组件,文字会有遮挡** 在Android中,input组件默认会有内边距,所以把padding改为0可以解决问题 **问题:在Android中 input组件,底部会有条白线** 添加红色的属性underlineColorAndroid > <TextInput > > placeholder="搜索关键字"
Spring @Value注入值失败,错误信息提示:Could not resolve placeholder
问题根源: ===== @Value("${wx.app.config.appid}") public Object appid; 异常信息: ===== Caused by: java.lang.IllegalArgumentException: Could not resolve placeholder 'wx.app.co
uniapp中使用picker中的注意事项
APP端中picker点击后不弹出: 1、请确保picker标签里面嵌套了一个view,并且view里面有值 2、请确保picker中的默认值的格式跟该picker类型的值对应 例如下面: <view class="time_wrap"> <input type="tex
vue 纯数字input
最近项目中需要实现一个元和分的转换,要求存储使用分,显示使用元。意外发现了一个实现input 只能输入纯数字的方案 * * * computed: { money: { //pay-content组件金额以分为单位,当前组件以元为单位,因此需要转换 get() {