js input keywords to generate tag code
![js input keywords to generate tag code](https://img.php.cn/upload/jscode/000/000/001/5a31df8d4d0ce781.png)
A very practical js tool that allows you to input keywords to generate tag codes. Enter keywords to create personal skill tags. You can also delete unnecessary tags.
js code
<script type="text/javascript"> var tagcon = $("tagcon"); var addBox = $("addBox"); var addBtn = addBox.children[1]; var intxt = addBox.children[0]; var divs = tagcon.children; function $(id){ return document.getElementById(id) }//$获取元素函数封装 function crele(ele){ return document.createElement(ele); } //创建元素 function adson(father,son1,son2,son3,clas1,clas2,clas3,clas4,con1,con2){ father.appendChild(son1); father.appendChild(son2); father.appendChild(son3); father.className = clas1; son1.className = clas2; son2.className = clas3; son3.className = clas4; son1.innerHTML = con1; son3.innerHTML = con2; } //输入框聚焦和失焦的效果 intxt.onfocus = function(){ intxt.style.backgroundColor = "#fff"; } intxt.onblur = function () { intxt.style.backgroundColor = "#e3e3e3"; } //点击add按钮添加标签 addBtn.onclick = function () { if(intxt.value != ""){ var newdiv = crele("div"); var newem = crele("em"); var newspan = crele("span"); var newa = crele("a"); if(divs.length == 0){//最新添加的标签在最前边 tagcon.appendChild(newdiv); }else{ tagcon.insertBefore(newdiv,divs[0]) } adson(newdiv,newem,newspan,newa,"tag","tagtxt","move","closetag",intxt.value,"×") intxt.value = ""; }else{ alert("你还没有输入呢!"); } //console.log(links.length); newa.onclick = function () { this.parentNode.style.display = "none"; } } </script>
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
24 Jun 2016
61 web page special effects that are very fashionable and have great visual effects
24 Jun 2016
Animation loading special effects implemented in pure css3
![jquery waterfall flow LightBox picture box special effects](http://static.oschina.net/uploads/code/201607/05154721_nehQ.gif)
06 Jul 2016
jquery waterfall flow LightBox picture box special effects
24 Jun 2016
A batch of hover special effects implemented by CSS3
24 Jun 2016
Revealing the special effects in Tencent’s Burberry event page
![CSS3 mouse slides over animated line border special effects](http://hovertree.com/hvtimg/bjafjg/dc6vc0fh.png)
06 Jul 2016
CSS3 mouse slides over animated line border special effects
24 Jun 2016
CSS3 input box shadow effects and other shadow effects
![See all articles](/static/imghw/down_right.png)
![](/static/imghw/taglogo.png)
Hot Tools
![jQuery+Html5 realizes beautiful confession animation code](https://img.php.cn/upload/jscode/000/000/001/58a2680388d90518.png)
jQuery+Html5 realizes beautiful confession animation code
jQuery+Html5 implements beautiful confession animation code, the animation effect is great, a must-have for programmers to confess!
![Couple's romantic confession js special effects code](https://img.php.cn/upload/jscode/000/000/001/589aae405d3b0522.jpg)
Couple's romantic confession js special effects code
JS special effects code for couples' romantic confession. Such special effects can be used on wedding photography websites or placed on personal websites. It is also a good special effect. PHP Chinese website recommends downloading!
![Simple js love confession artifact](https://img.php.cn/upload/jscode/000/000/001/58a26c803edda437.png)
Simple js love confession artifact
Simple native js love confession artifact
![Bunker's html5 particle animation expressive effects](https://img.php.cn/upload/jscode/000/000/001/58a27823ab29e827.jpg)
Bunker's html5 particle animation expressive effects
Bunker's html5 particle animation expression special effects code, the animated special effects text can be changed in the code, you can make a page where you can customize text input, it should be very popular, this HTML5 special effect is very beautiful.
![jQuery responsive background login interface template](https://img.php.cn/upload/jscode/000/000/001/5879cc520cc7e387.png)
jQuery responsive background login interface template
jQuery responsive backend login interface template html source code. The login page uses jquery to verify the form and determine whether the username and password meet the requirements. Usually the login page is a page that must be used on corporate websites or mall websites. Responsive backend pages, When the browser zooms in or out, the background will resize the image according to the browser! PHP Chinese website recommends downloading!
![](/static/imghw/taglogo.png)