更多>
最新下载
Vue记事本添加删除特效
使用vue制作简单的文本框输入关键词创建或删除计划事项记事本功能效果。可用于生活记事本备忘录特效。使用方法:参数介绍:新增(1、生成列表结构 v-for 和数组 2、获取用户输入 v-model 3、回车,新增数据 v-on .enter)--删除(数据改变和数据绑定的元素是同步变化的;时间的自定义参数;splice方法的应用)---计数(统计信息个数length)--清除(点击清除所有信息 v-
0
2026-01-28
24小时阅读排行榜
- 1 函数索引(expression index)在 WHERE 函数包裹列时的应用
- 2 SQL Server CROSS APPLY / OUTER APPLY 的典型使用场景
- 3 MySQL GROUP BY 后 ORDER BY 字段未在 SELECT 中的排序失效原因
- 4 Type ‘Observable’ 错误的根源与修复方法
- 5 SQL 如何用临时表 + 索引加速复杂多表关联查询
- 6 SQL 中日期加减天/月/年的跨数据库兼容写法汇总
- 7 SQL 如何实现“增量同步”避免全量同步的方案
- 8 如何在 Go 中将指针解引用为值?
- 9 OFFSET 10万导致全表扫描的 seek 方法替代写法模板
- 10 如何在类中安全复用函数名变量以调用字符串内置方法
- 11 如何在类中安全复用外部循环变量作为方法调用名?
- 12 如何在带背景图的页脚中精准叠加内容(HTML/CSS 实现方案)
- 13 如何监控 MySQL Threads_connected 接近 max_connections 的告警
- 14 如何用正则表达式校验严格大于 0 的二维数值数组字符串
- 15 如何在 Laravel 表单过滤后精准保持复选框选中状态
更多>
最新教程
-
- Node.js 教程
- 16291 2025-08-28
-
- CSS3 教程
- 1546950 2025-08-27
-
- Rust 教程
- 23418 2025-08-27
-
- Vue 教程
- 25859 2025-08-22
-
- PostgreSQL 教程
- 22356 2025-08-21
-
- Git 教程
- 9314 2025-08-21
js输入关键词生成标签代码
js代码
<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>
本站所有资源都是由网友投搞发布,或转载各大下载站,请自行检测软件的完整性!本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵权请联系我们删除下架,联系方式:admin@php.cn
