js 写一个简单的搜索关键字

随便写下body

   <h3 id="h3">根据叮咚买菜公开招股书信息显示，自2017年5月自上海起步，叮咚买菜现已覆盖全国29座城市，拥有40个区域处理中心和超过950个自营前置仓，其中5座城市的月GMV超1亿元。根据灼识咨询的数据，叮咚买菜是国内增速最快的即时电商；此外，叮咚买菜亦从最早的生鲜杂货品类，拓展至其他日用商品。</h3><input id="ipt" type="text"><button id="but">搜索</button>

接下来写js部分

 but.onclick=function(){var sp=document.querySelectorAll("span")for (let i = 0; i < sp.length; i++) {sp[i].style.color=""         }var hh = h3.innerHTMLlet ipt1 =ipt.value var reg = new RegExp(ipt1,'g')var result=(hh.replace(reg,"<span style='color:red'>"+ipt1+"</span>"))h3.innerHTML=result}

思路呢就是点击先清空颜色

然后获取输入框中的值在然后把这个值用span标签包裹替换h3中所有相应的值

目的就是为了给他改个颜色

别的功能自己加嘛比如加个搜索记录啊或者调内容什么的也可以就是功能不全

js 写一个简单的搜索关键字相关推荐

JS写一个简单的五星评价
JS写一个简单的五星评价在做前端网页页面的时候很多时候回有遇到星级评价的模块,用到的地方挺多所以自己就上传下方便大家和自己使用(不支持半星评价因为没有半星的图). 效果图如下: 下面是我们的代码: ...
使用Node.js写一个简单的api接口
引入Http模块默认你已经安装了Node.js Node当中内置了Http模块: 可以使用 var http= require("http"); 复制代码引入http模块: H ...
原生js写一个简单的编辑器
js原生写的编辑器,主要是使用document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)来实现的如果该指令不被支持或停用将会 ...
用js写一个简单的前世今生
前世今生,没有今生只有前世刚开始的样子,没有任何的输入在下面的input内输入自己的名字,然后点击确认就会有前世的一些内容,具体内容都可以自己修改,我只是简单做了一个demo css的内容 &l ...
用three.js写一个简单的3D射门游戏
这个小游戏很简单,一共由3个部分构成.1个平面(球场),1个球体(足球)还有一个立方体(球门). 上个图给你们感受一下简陋的画风(掘金最高上传5M图片,原来图片都太大了压缩后很不清晰) 当按下空格键时 ...
使用原生js写一个简单的注册登录页面
目录 1.注册页面 2.登录页面 1.首先是我们的注册页面这是我们的html骨架 <!DOCTYPE html> <html lang="en">< ...
Web(前端开发）结合html、css、js写一个简单的相册
该相册制作分为登录.注册和主页面(由于后端没有实现,登录注册只有一些简单的判断),代码如下 (1)登录界面的HTML <!DOCTYPE html> <html lang=" ...
vue结合php增删改查实例,用vue.js写一个简单的增删改查
Title tbody:empty:after { content: '没有找到'; } 姓名年龄操作 {{item.stuName}}{{item.age}}修改删除添加 var app = n ...
js 写一个简单的时间计时器
<body οnlοad="startTime()"><div id="txt" ></div><script> ...

js 写一个简单的搜索关键字

js 写一个简单的搜索关键字相关推荐

最新文章

热门文章