如何使<input type="text"> 双击时不显示历史记录

单个:

<input   type="text" autoComplete= "Off "  />

 

所有表单内:

<form   autocomplete= "off ">

   <input   type= "text "  name= "mytext" />

</form>

<div class="container-div"> <div class="row"> <div class="ibox-content"> <form id="formId"> <input type="hidden" id="parentId" name="parentId"> <input type="hidden" id="devSiteId" name="devSiteId"> </form> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" aria-expanded="true" onclick="queryDevList()">设备列表</a></li> <!-- <li><a href="#deviceAdd" data-toggle="tab" aria-expanded="false" id="addTabLink" onclick="showAddTab()">设备信息</a></li> --> <li><a href="#deviceAdd" id="addTabLink" data-toggle="tab" aria-expanded="false" onclick="devInfo()">设备信息</a></li> <li><a data-toggle="tab" aria-expanded="false" onclick="queryNotice()">检修记录</a></li> <li><a data-toggle="tab" aria-expanded="false" onclick="queryInstallHistory()">安装历史</a></li> </ul> </div> <div class="btn-group-sm" id="toolbar" role="group"> <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:devledger:add"> <i class="fa fa-plus"></i> 添加 </a> <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:devledger:remove"> <i class="fa fa-remove"></i> 删除 </a> <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:devledger:export"> <i class="fa fa-download"></i> 导出 </a> </div> <div class="col-sm-12 select-table table-striped"> <table id="bootstrap-table"></table> </div> </div> </div>选择设备信息如何实现显示某个设备的详情信息
最新发布
11-07
实现第二个tab页根据devid查询设备信息 <!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('设备台帐管理列表')" /> <th:block th:include="include :: layout-latest-css" /> <th:block th:include="include :: ztree-css" /> </head> <body class="gray-bg"> <div class="ui-layout-west"> <div class="box box-main"> <div class="box-header"> <div class="box-title"> <i class="fa icon-grid"></i> 组织机构 </div> <div class="box-tools pull-right"> <a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="管理部门"><i class="fa fa-edit"></i></a> <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button> <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button> <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button> </div> </div> <div class="ui-layout-content"> <div id="tree" class="ztree"></div> </div> </div> </div> <div class="ui-layout-center"> <div class="container-div"> <div class="row"> <!-- 页签开始 --> <div class="ibox-content"> <!-- <form id="formId"> <input type="hidden" id="parentId" name="parentId"> </form> --> <ul class="nav nav-tabs"> <!-- { text: "设备列表", name: "devlist", alias:"devlist",visible:true}, { text: "设备信息", name: "devinfo" ,alias:"devinfo",visible:true}, { text: "扩展属性", name: "devext" ,alias:"devext",visible:true}, { text: "物料清单", name: "devbom" ,alias:"devbom",visible:true}, { text:"文档清单", name:"devdoc",alias:"devdoc",visible:true}, { text: "检修记录", name: "overhaulrecord" ,alias:"overhaulrecord",visible:true}, { text: "养护计量", name: "curingmeasure" ,alias:"curingmeasure",visible:true}, { text: "安装历史", name: "installationhistory" ,alias:"installationhistory",visible:true} --> <li class="active"><a data-toggle="tab" aria-expanded="true" onclick="queryDevlist()">设备列表</a></li> <li><a data-toggle="tab" aria-expanded="false" onclick="devinfo()">设备信息</a></li> <li><a data-toggle="tab" aria-expanded="false" onclick="devext()">扩展属性</a></li> <li><a data-toggle="tab" aria-expanded="false" onclick="devbom()">物料清单</a></li> <li><a data-toggle="tab" aria-expanded="false" onclick="devdoc()">文档清单</a></li> <li><a data-toggle="tab" aria-expanded="false" onclick="overhaulrecord()">检修记录</a></li> <li><a data-toggle="tab" aria-expanded="false" onclick="curingmeasure()">养护计量</a></li> <li><a data-toggle="tab" aria-expanded="false" onclick="installationhistory()">安装历史</a></li> <!-- <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 第一个选项卡</a> </li> <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">第二个选项卡</a> </li> --> </ul> </div> <!-- 页签结束 --> <div class="col-sm-12 search-collapse"> <form id="devledger-form"> <input type="hidden" id="deptId" name="deptId"> <input type="hidden" id="devSiteId" name="devSiteId"> <div class="select-list"> <ul> <li> <label>设备名称:</label> <input type="text" name="devName"/> </li> <li> <label>固定资产编码:</label> <input type="text" name="assetCode"/> </li> <li> <label>生产厂家:</label> <input type="text" name="factory"/> </li> <!-- <li> 设备状态:<select name="status" th:with="type=${@dict.getType('sys_normal_disable')}"> <option value="">所有</option> <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> </select> </li> --> <li> <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a> <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a> </li> </ul> </div> </form> </div> <div class="btn-group-sm" id="toolbar" role="group"> <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:devledger:add"> <i class="fa fa-plus"></i> 新建 </a> <!-- <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="system:devledger:edit"> <i class="fa fa-edit"></i> 修改 </a> --> <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:devledger:remove"> <i class="fa fa-remove"></i> 删除 </a> <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:devledger:export"> <i class="fa fa-download"></i> 导出 </a> </div> <div class="col-sm-12 select-table table-striped" style="overflow-y: auto;height: 250px;"> <table id="bootstrap-table"></table> </div> </div> </div> </div> <th:block th:include="include :: footer" /> <th:block th:include="include :: layout-latest-js" /> <th:block th:include="include :: ztree-js" /> <script th:inline="javascript"> //var editFlag = [[${@permission.hasPermi('system:devledger:edit')}]]; //var removeFlag = [[${@permission.hasPermi('system:devledger:remove')}]]; var prefix = ctx + "system/devledger"; var selectedDeviceId = ""; //判断当前元素的宽度,动态决定侧边栏是否隐藏 $(function() { var panehHidden = false; if ($(this).width() < 769) { panehHidden = true; } $('body').layout({ initClosed: panehHidden, west__size: 185 }); queryDevlist(); queryLocationTree(); }); //同页签的按钮设定 var ButtonManager = { templates: { devlist: ` <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:location:add"> <i class="fa fa-plus"></i> 新建 </a> <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:location:remove"> <i class="fa fa-remove"></i> 删除 </a> <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:location:export"> <i class="fa fa-download"></i> 导出 </a> `, devinfo: ` <a class="btn btn-success" onclick="$.operate.save()" shiro:hasPermission="system:base:save"> <i class="fa fa-plus"></i> 保存 </a> <a class="btn btn-primary single disabled" onclick="$.operate.printnum()" shiro:hasPermission="system:base:printnum"> <i class="fa fa-edit"></i> 打印条形码 </a> <a class="btn btn-danger multiple disabled" onclick="$.operate.printform()" shiro:hasPermission="system:base:printform"> <i class="fa fa-remove"></i> 打印台账 </a> <a class="btn btn-warning" onclick="$.operate.renewal()" shiro:hasPermission="system:base:renewal"> <i class="fa fa-download"></i> 设备续保 </a> `, devext: ` <a class="btn btn-warning" onclick="$.operate.save()" shiro:hasPermission="system:base:save"> <i class="fa fa-download"></i> 保存 </a> `, devbom: `//此页签中包含设备物料清单、设备配套耗材、设备配套文档三个功能增删改查 <a class="btn btn-warning" onclick="$.operate.save()" shiro:hasPermission="system:base:save"> <i class="fa fa-download"></i> 保存 </a> ` }, change: function(buttonType) { if (this.templates[buttonType]) { $('#toolbar').html(this.templates[buttonType]); return true; } return false; }, // 切换到设备列表按钮 toDevlist: function() { return this.change('devlist'); }, // 切换到设备信息按钮 toDevinfo: function() { return this.change('devinfo'); }, // 切换到扩展属性按钮 toDevext: function() { return this.change('devext'); }, // 切换到物料清单按钮 toDevbom: function() { return this.change('devbom'); }, // 切换到文档清单按钮 toDevdoc: function() { return this.change('devdoc'); }, // 切换到检修记录按钮 toOverhaulrecord: function() { return this.change('overhaulrecord'); }, // 切换到养护计量按钮 toCuringmeasure: function() { return this.change('curingmeasure'); }, // 切换到安装历史按钮 toInstallationhistory: function() { return this.change('installationhistory'); } }; //查询设备列表 function queryDevlist() { var options = { url: prefix + "/list", createUrl: prefix + "/add", /* updateUrl: prefix + "/edit/{id}", */ removeUrl: prefix + "/remove", exportUrl: prefix + "/export", /* sortName: "createTime", sortOrder: "desc", */ modalName: "设备台帐管理", columns: [{ checkbox: true }, { field: 'devCode', title: '设备编码' }, { field: 'devName', title: '设备名称' /* title: '设备名称', sortable: true */ }, { field: 'devTypeId', title: '设备类型'//设备类型ID }, { field: 'devSpecksId', title: '设备型号' }, { field: 'factory', title: '生产厂家' }, { field: 'assetCode', title: '固定资产编码' }, { field: 'devStatus', title: '设备状态', align: 'center', formatter: function (value, row, index) { return statusTools(row); } }, { field: 'wzCode', title: '物资编码', visible: false // 隐藏该列 }, { field: 'snCode', title: 'SN编码', visible: false // 隐藏该列 }, { title: '操作', align: 'center', visible: false, // 隐藏该列 formatter: function(value, row, index) { var actions = []; actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.devId + '\')"><i class="fa fa-edit"></i>编辑</a> '); actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.devId + '\')"><i class="fa fa-remove"></i>删除</a>'); return actions.join(''); } } ], onLoadSuccess: function(data) { // 表格数据加载成功后执行 if (data && data.row.length > 0) { // 获取第一行数据 var firstRow = data.row[0]; selectedDeviceId = firstRow.devId; console.log("第一行设备ID:", selectedDeviceId); } }, // 添加双击行的回调函数 onDblClickRow: function (row, $element) { // 这里编写跳转至第二个 tab 页的逻辑 // 假设使用 jQuery 来切换 tab 页,第二个 tab 的 id 为 tab2 $('#tab2').tab('show'); } }; $.table.init(options); } function devinfo() { // 跳转到设备信息页面并传递参数 window.location.href = 'add.html?devId=' + selectedDeviceId; } function devext(){ /* prefix = ctx + "system/base"; */ debugger; var options2 = { /* id:'bootstrap-table', url: prefix + "/list", createUrl: prefix + "/add", updateUrl: prefix + "/edit/{id}", removeUrl: prefix + "/remove", exportUrl: prefix + "/export", modalName: "设备基础信息", */ url: prefix + "/devext", createUrl: prefix + "/add", /* updateUrl: prefix + "/edit/{id}", */ removeUrl: prefix + "/remove", exportUrl: prefix + "/export", /* sortName: "createTime", sortOrder: "desc", */ modalName: "设备信息", columns: [{ checkbox: true }, /* { field: 'devId', title: '设备ID', visible: false }, */ { field: 'devCode', title: '设备编码' }, { field: 'devName', title: '设备名称' }, { field: 'professionName', title: '专业名称' }, { field: 'devSpecksId', title: '设备型号' }, { field: 'measurementFlag', title: '计量标志' }, { field: 'maintenanceFlag', title: '养护标志' }, { field: 'devStatus', title: '设备状态' }, { field: 'statuDate', title: '当前状态日期' }, { field: 'userDevFlag', title: '是否用户设备' }, { field: 'factory', title: '生产厂家' }, { field: 'zclb', title: '管理分类' } , { title: '操作', align: 'center', formatter: function(value, row, index) { var actions = []; actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.devId + '\')"><i class="fa fa-edit"></i>编辑</a> '); actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.devId + '\')"><i class="fa fa-remove"></i>删除</a>'); return actions.join(''); } } ] }; debugger; reinitializeTable(options2); //$.table.init(options2); ButtonManager.toEquit(); // 切换回新增按钮 $.table.search(); } //查询树形结构 function queryLocationTree() { var url = ctx + "system/devledger/treeData"; var options = { url: url, expandLevel: 2, onClick : zOnClick }; $.tree.init(options); function zOnClick(event, treeId, treeNode) { $("#devSiteId").val(treeNode.id); //$("#devSiteId").val(treeNode.pId); //$("#title").val(treeNode.pId); $.table.search(); } } //树形结构的展开折叠刷新 $('#btnExpand').click(function() { $._tree.expandAll(true); $(this).hide(); $('#btnCollapse').show(); }); $('#btnCollapse').click(function() { $._tree.expandAll(false); $(this).hide(); $('#btnExpand').show(); }); $('#btnRefresh').click(function() { queryLocationTree(); }); /* 树形结构-部门 */ function dept() { var url = ctx + "system/type"; $.modal.openTab("部门管理", url); } /* 设备状态显示 */ function statusTools(row) { if (row.devStatus == "active") { return '在用'; //return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.userId + '\')"></i> '; } else if (row.devStatus == "tobeinstall") { return '待安装'; //return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.userId + '\')"></i> '; } else if (row.devStatus == "inactive") { return '停用'; //return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.userId + '\')"></i> '; }else if (row.devStatus == "discard") { return '报废'; //return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.userId + '\')"></i> '; } } </script> </body> </html>
10-17
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>AI 图片生成工具</title> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background: linear-gradient(135deg, #6a11cb, #2575fc); color: white; } header { background: rgba(0, 0, 0, 0.3); padding: 1rem; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } nav a { color: white; margin: 0 15px; text-decoration: none; font-weight: bold; } nav a:hover { text-decoration: underline; } .container { max-width: 900px; margin: 2rem auto; padding: 2rem; background: rgba(255, 255, 255, 0.1); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); } h1, h2 { text-shadow: 0 2px 4px rgba(0,0,0,0.3); } label { display: block; margin-top: 1rem; font-size: 1.1rem; } input[type="text"] { width: 100%; padding: 12px; margin: 0.5rem 0; border: none; border-radius: 6px; font-size: 1rem; } button { margin-top: 1.5rem; padding: 12px 24px; background: #ff6f61; color: white; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: background 0.3s; } button:hover { background: #e05a4f; } #result { margin-top: 2rem; text-align: center; } #result img { max-width: 100%; max-height: 400px; border-radius: 10px; box-shadow: 0 6px 12px rgba(0,0,0,0.3); } footer { text-align: center; padding: 1rem; margin-top: 2rem; color: rgba(255,255,255,0.7); font-size: 0.9rem; } </style> </head> <body> <!-- 头部导航 --> <header> <h1>🎨 AI 图片生成器</h1> <nav> <a href="index.html">首页</a> <a href="guide.html">使用说明</a> </nav> </header> <!-- 主内容区 --> <div class="container"> <h2>输入你的创意描述</h2> <p>例如:一只穿宇航服的猫在火星上钓鱼</p> <label for="prompt">文字提示 (Prompt):</label> <input type="text" id="prompt" placeholder="描述你想要的画面..." /> <button onclick="generateImage()">生成图片</button> <div id="result"> <!-- 生成的图片将显示在这里 --> </div> </div> <footer> © 2025 AI Image Generator Tool. All rights reserved. </footer> <!-- JavaScript 实现图片生成逻辑 --> <script> // 预设一些示例图片用于模拟生成(实际项目中这里会调用API) const mockImages = [ "https://source.unsplash.com/random/800x600/?abstract", "https://source.unsplash.com/random/800x600/?nature", "https://source.unsplash.com/random/800x600/?cyberpunk", "https://source.unsplash.com/random/800x600/?fantasy", "https://source.unsplash.com/random/800x600/?surreal" ]; function generateImage() { const promptInput = document.getElementById("prompt").value.trim(); const resultDiv = document.getElementById("result"); if (!promptInput) { alert("请输入你的创意描述!"); return; } resultDiv.innerHTML = "<p>正在使用 AI 生成图片...</p>"; // 模拟网络延迟 setTimeout(() => { const randomImgUrl = mockImages[Math.floor(Math.random() * mockImages.length)]; resultDiv.innerHTML = ` <h3>生成结果:</h3> <img src="${randomImgUrl}" alt="AI Generated Image" onerror="this.src='https://via.placeholder.com/800x600?text=Image+Failed';"> <p><strong>Prompt:</strong> ${promptInput}</p> `; }, 1500); } </script> </body> </html> 让主页内容丰富,主页更加美观,添加功能,功能必须正常能预览打开,我需要完整代码
11-07
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>🎨 AI 图片生成器 - 智能图像创作平台</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet"> <style> :root { --primary: #6a11cb; --secondary: #2575fc; --accent: #ff6f61; --light: rgba(255, 255, 255, 0.9); --dark-bg: #1a1a2e; --card-bg: rgba(255, 255, 255, 0.12); --shadow: 0 8px 32px rgba(0, 0, 0, 0.15); --transition: all 0.3s ease; } * { box-sizing: border-box; } body { font-family: 'Noto Sans SC', 'Segoe UI', sans-serif; margin: 0; padding: 0; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; min-height: 100vh; position: relative; } /* 渐变背景粒子效果 */ body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://particles.js.org/images/background.png'); opacity: 0.05; pointer-events: none; z-index: -1; } header { background: rgba(0, 0, 0, 0.4); padding: 1.2rem; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); backdrop-filter: blur(10px); } h1 { margin: 0; font-size: 2.2rem; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.3); } nav a { color: white; margin: 0 18px; text-decoration: none; font-weight: 500; font-size: 1.1rem; transition: var(--transition); } nav a:hover { text-decoration: underline; text-shadow: 0 1px 6px rgba(255,255,255,0.5); } main { display: flex; flex-wrap: wrap; gap: 2rem; padding: 0 1rem; justify-content: center; } .input-section { flex: 1 1 400px; max-width: 500px; } .gallery-section { flex: 2 1 600px; max-width: 800px; } .container { background: var(--card-bg); border-radius: 16px; padding: 2rem; box-shadow: var(--shadow); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } h2 { font-size: 1.5rem; margin-top: 0; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.3); } p.example { font-size: 0.95rem; opacity: 0.8; margin-bottom: 1.2rem; } label { display: block; margin-top: 1rem; font-size: 1.1rem; font-weight: 500; } input[type="text"], select { width: 100%; padding: 14px; margin: 0.5rem 0; border: none; border-radius: 8px; font-size: 1rem; background: rgba(255, 255, 255, 0.2); color: white; outline: none; transition: var(--transition); } input[type="text"]::placeholder { color: rgba(255,255,255,0.6); } input[type="text"]:focus { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } button { margin-top: 1.5rem; padding: 14px 28px; background: var(--accent); color: white; border: none; border-radius: 8px; font-size: 1.1rem; cursor: pointer; transition: var(--transition); font-weight: 600; width: 100%; } button:hover { background: #e05a4f; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(255,111,97,0.4); } button:active { transform: translateY(0); } #result { margin-top: 1.5rem; text-align: center; min-height: 200px; } #result.loading { color: rgba(255,255,255,0.8); font-style: italic; } #result img { max-width: 100%; max-height: 400px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.3); border: 4px solid rgba(255,255,255,0.2); margin: 1rem auto; display: block; cursor: zoom-in; } .img-caption { margin-top: 0.5rem; font-size: 0.9rem; opacity: 0.9; } .thumbnail-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 1.5rem; } .thumb-item { position: relative; height: 100px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: var(--transition); cursor: zoom-in; } .thumb-item:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(0,0,0,0.3); } .thumb-item img { width: 100%; height: 100%; object-fit: cover; } .clear-btn { background: #aaa !important; margin-top: 1rem !important; font-size: 0.9rem !important; } .clear-btn:hover { background: #888 !important; } footer { text-align: center; padding: 1.5rem; margin-top: 3rem; color: rgba(255,255,255,0.6); font-size: 0.9rem; } /* === 全屏图片预览模态框样式 === */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 1000; justify-content: center; align-items: center; flex-direction: column; animation: fadeIn 0.3s ease; } .modal.active { display: flex; } .modal-content { max-width: 90vw; max-height: 80vh; border-radius: 10px; box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); overflow: hidden; position: relative; } .modal-content img { max-width: 100%; max-height: 80vh; display: block; } .modal-caption { margin-top: 1rem; font-size: 1rem; color: white; text-align: center; max-width: 90vw; } .close-modal { position: absolute; top: 15px; right: 20px; font-size: 2rem; color: white; background: none; border: none; cursor: pointer; opacity: 0.8; } .close-modal:hover { opacity: 1; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 768px) { main { flex-direction: column; padding: 0.5rem; } .container { padding: 1.5rem; } h1 { font-size: 1.8rem; } } </style> </head> <body> <!-- 头部导航 --> <header> <h1>🎨 AI 图片生成器</h1> <nav> <a href="index.html">首页</a> <a href="guide.html">使用说明</a> </nav> </header> <main> <!-- 左侧输入区 --> <section class="input-section"> <div class="container"> <h2>描述你的创意</h2> <p class="example">例如:一只穿宇航服的猫在火星上钓鱼,赛博朋克风格</p> <label for="prompt">文字提示 (Prompt)</label> <input type="text" id="prompt" placeholder="输入你想要的画面描述..." /> <label for="style">艺术风格</label> <select id="style"> <option value="">无特定风格</option> <option value="anime">动漫风格</option> <option value="realistic">写实风格</option> <option value="oil painting">油画风格</option> <option value="cyberpunk">赛博朋克</option> <option value="watercolor">水彩画</option> <option value="surrealism">超现实主义</option> </select> <button onclick="generateImage()">✨ 生成图片</button> <div id="result"> <!-- 生成结果将显示在这里 --> </div> </div> </section> <!-- 右侧图库区 --> <section class="gallery-section"> <div class="container"> <h2>🖼️ 生成历史</h2> <p class="example">点击缩略图可查看大图</p> <div class="thumbnail-wall" id="history"></div> <button class="clear-btn" onclick="clearHistory()">🗑️ 清除历史</button> </div> </section> </main> <footer> © 2025 AI Image Generator Tool | 使用 Unsplash 模拟数据 | 学习演示用途 </footer> <!-- === 全屏图片预览模态框 === --> <div id="imageModal" class="modal"> <button class="close-modal" onclick="closeModal()">×</button> <div class="modal-content"> <img id="modalImage" src="" alt="Preview"> </div> <div class="modal-caption" id="modalCaption"></div> </div> <script> // 历史记录存储 let history = JSON.parse(localStorage.getItem('aiImageHistory')) || []; // 获取模态框元素 const modal = document.getElementById("imageModal"); const modalImg = document.getElementById("modalImage"); const modalCaption = document.getElementById("modalCaption"); // 打开模态框函数 function viewImage(src, caption) { modalImg.src = src; modalCaption.textContent = caption || ""; modal.classList.add("active"); document.body.style.overflow = "hidden"; // 防止滚动 } // 关闭模态框 function closeModal() { modal.classList.remove("active"); document.body.style.overflow = ""; // 恢复滚动 } // 点击遮罩外部关闭 modal.onclick = function(e) { if (e.target === modal) { closeModal(); } }; // 支持 ESC 键关闭(可选) document.onkeydown = function(e) { if (e.key === "Escape" && modal.classList.contains("active")) { closeModal(); } }; // 更新历史记录到页面 function updateHistory() { const historyContainer = document.getElementById('history'); historyContainer.innerHTML = ''; if (history.length === 0) { historyContainer.innerHTML = '<p style="opacity:0.6; font-size:0.9rem;">暂无历史记录</p>'; return; } // 显示最新的6条 const recent = history.slice(-6).reverse(); recent.forEach(item => { const div = document.createElement('div'); div.className = 'thumb-item'; div.onclick = () => viewImage(item.imageUrl, `Prompt: ${item.prompt} | 风格: ${item.style}`); div.innerHTML = ` <img src="${item.imageUrl}" alt="history" onerror="this.onerror=null;this.src='https://via.placeholder.com/120x100?text=Error';"> `; historyContainer.appendChild(div); }); } // 从历史中点击查看详情(也支持大图) function showFromHistory(item) { document.getElementById('result').innerHTML = ` <h3>历史记录</h3> <img src="${item.imageUrl}" alt="Historical Image" onclick="viewImage('${item.imageUrl}', 'Prompt: ${item.prompt} | 风格: ${item.style}')"> <p class="img-caption"><strong>Prompt:</strong> ${item.prompt}</p> ${item.style ? `<p class="img-caption"><strong>风格:</strong> ${item.style}</p>` : ''} `; window.scrollTo({ top: 0, behavior: 'smooth' }); } // 清除所有历史 function clearHistory() { if (confirm("确定要清除所有生成的历史记录吗?")) { localStorage.removeItem('aiImageHistory'); history = []; updateHistory(); alert("历史记录已清除!"); } } // 图片模拟池(可按风格分类) const imagePool = { default: ['abstract', 'art', 'creative'], anime: ['anime', 'manga', 'cartoon'], realistic: ['realistic', 'photo', 'highly detailed'], 'oil painting': ['oil painting', 'brush strokes', 'classic art'], cyberpunk: ['cyberpunk', 'neon', 'futuristic'], watercolor: ['watercolor', 'painting', 'soft colors'], surrealism: ['surreal', 'dreamlike', 'melting'] }; function getRandomImageUrl(prompt, style) { const tags = imagePool[style] || imagePool.default; const tag = tags[Math.floor(Math.random() * tags.length)]; return `https://source.unsplash.com/random/800x600/?${encodeURIComponent(tag)}`; } // 生成图片主函数 function generateImage() { const promptInput = document.getElementById("prompt").value.trim(); const styleSelect = document.getElementById("style").value; const resultDiv = document.getElementById("result"); if (!promptInput) { alert("请输入你的创意描述!"); return; } resultDiv.className = "loading"; resultDiv.innerHTML = "<p>🧠 正在通过 AI 创作中,请稍候...</p>"; // 模拟网络请求延迟 setTimeout(() => { const imageUrl = getRandomImageUrl(promptInput, styleSelect); const displayStyle = document.getElementById("style").options[document.getElementById("style").selectedIndex].text; resultDiv.className = ""; resultDiv.innerHTML = ` <h3>✅ 生成成功!</h3> <img src="${imageUrl}" alt="AI Generated" onclick="viewImage('${imageUrl}', 'Prompt: ${promptInput} | 风格: ${displayStyle}')" onerror="this.src='https://via.placeholder.com/800x600?text=生成失败';"> <p class="img-caption"><strong>Prompt:</strong> ${promptInput}</p> ${styleSelect ? `<p class="img-caption"><strong>风格:</strong> ${displayStyle}</p>` : ''} `; // 添加到历史 const record = { prompt: promptInput, style: displayStyle, imageUrl, timestamp: new Date().toLocaleString() }; history.push(record); localStorage.setItem('aiImageHistory', JSON.stringify(history)); updateHistory(); // 刷新缩略图墙 }, 1800); } // 页面加载初始化历史记录 window.onload = function () { updateHistory(); }; </script> </body> </html> 添加更多功能,我需要完整代码
11-07
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('用户列表')" /> <th:block th:include="include :: layout-latest-css" /> <th:block th:include="include :: ztree-css" /> </head> <body class="gray-bg"> <div class="ui-layout-west"> <div class="box box-main"> <div class="box-header"> <div class="box-title"> <i class="fa icon-grid"></i> 组织机构 </div> <div class="box-tools pull-right"> <a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="管理部门"><i class="fa fa-edit"></i></a> <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button> <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button> <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button> </div> </div> <div class="ui-layout-content"> <div id="tree" class="ztree"></div> </div> </div> </div> <div class="ui-layout-center"> <div class="container-div"> <div class="row"> <div class="ibox-content"> <form id="formId"> <input type="hidden" id="parentId" name="parentId"> <input type="hidden" id="devSiteId" name="devSiteId"> </form> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" aria-expanded="true" onclick="queryDevList()">设备列表</a></li> <li><a data-toggle="tab" aria-expanded="false" onclick="queryNotice()">设备信息</a></li> <li><a data-toggle="tab" aria-expanded="false" onclick="queryNotice()">检修记录</a></li> </ul> </div> <div class="btn-group-sm" id="toolbar" role="group"> <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:devledger:add"> <i class="fa fa-plus"></i> 添加 </a> <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:devledger:remove"> <i class="fa fa-remove"></i> 删除 </a> <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:devledger:export"> <i class="fa fa-download"></i> 导出 </a> </div> <div class="col-sm-12 select-table table-striped"> <table id="bootstrap-table"></table> </div> </div> </div> </div> <th:block th:include="include :: footer" /> <th:block th:include="include :: layout-latest-js" /> <th:block th:include="include :: ztree-js" /> <script th:inline="javascript"> var addFlag = [[${@permission.hasPermi('system:devledger:add')}]]; var editFlag = [[${@permission.hasPermi('system:devledger:edit')}]]; var removeFlag = [[${@permission.hasPermi('system:devledger:remove')}]]; var prefix = ctx + "system/devledger"; var selectedDeviceId = null; var detailFlag = [[${@permission.hasPermi('system:devledger:detail')}]]; $(function() { var panehHidden = false; if ($(this).width() < 769) { panehHidden = true; } $('body').layout({ initClosed: panehHidden, west__size: 185 }); queryDevList(); queryLocationTree(); }); var ButtonManager = { templates: { devlist: ` <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:devledger:add"> <i class="fa fa-plus"></i> 添加 </a> <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:devledger:remove"> <i class="fa fa-remove"></i> 删除 </a> <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:devledger:export"> <i class="fa fa-download"></i> 导出 </a> `, equit: ` <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:base:add"> <i class="fa fa-plus"></i> 添加 </a> <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="system:base:edit"> <i class="fa fa-edit"></i> 修改 </a> <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:base:remove"> <i class="fa fa-remove"></i> 删除 </a> <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:base:export"> <i class="fa fa-download"></i> 导出 </a> `, notice: ` ` }, change: function(buttonType) { if (this.templates[buttonType]) { $('#toolbar').html(this.templates[buttonType]); return true; } return false; }, // 切换到设备列表按钮 toDevList: function() { return this.change('devlist'); }, // 切换到关联设备按钮 toNotice: function() { return this.change('equit'); }, // 切换到安装历史按钮 toNotice: function() { return this.change('notice'); } }; function queryNotice(){ prefix = ctx + "system/devledger"; var options2 = { id:'bootstrap-table', url: prefix + "/queryMaintenance/"+selectedDeviceId, detailUrl: prefix + "/detail/{id}", modalName: "检修记录", columns: [{ checkbox: true }, { field: 'noticeId', title: 'NOTICE_ID', visible: false // 隐藏该列 }, { field: 'applyPerson', title: '申请人' }, { field: 'applyDept', title: '申请部门' /* title: '设备名称', sortable: true */ }, { field: 'applyTime', title: '申请间' }, { field: 'factCost', title: '检修成本(元)' }, { field: 'priority', title: '紧急程度', formatter: function (value, row, index) { return priorityStatus(row); } }, { field: 'status', title: '工单状态', formatter: function (value, row, index) { return noticeStatus(row); } }, { field: 'acceptingTime', title: '验收间', //visible: false // 隐藏该列 }, { field: 'acceptingPerson', title: '验收人', //visible: false // 隐藏该列 }, { title: '查看明细', align: 'center', formatter: function(value, row, index) { var actions = []; actions.push('<a class="btn btn-warning btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="$.operate.detail(\'' + row.noticeId + '\')"><i class="fa fa-search"></i>详细</a>'); return actions.join(''); } } ] }; reinitializeTable(options2); ButtonManager.toNotice(); // 切换回新增按钮 $.table.search(); } function location_history(){ ButtonManager.toNotice(); } //销毁table function reinitializeTable(newOptions) { var tableId = 'bootstrap-table'; // 你的表格ID // 方法1:销毁后重新初始化 try { // 销毁现有表格 $('#' + tableId).bootstrapTable('destroy'); } catch (e) { console.log('表格销毁失败或表格存在:', e); } // 清空表格容器(可选) $('#' + tableId).empty(); // 重新初始化 $.table.init(newOptions || options); } function queryDevList() { prefix = ctx + "system/devledger"; var options = { url: prefix + "/list", createUrl: prefix + "/add", /* updateUrl: prefix + "/edit/{id}", */ removeUrl: prefix + "/remove", exportUrl: prefix + "/export", modalName: "设备台帐管理", columns: [{ checkbox: true }, { field: 'devCode', title: '设备编码' }, { field: 'devName', title: '设备名称' /* title: '设备名称', sortable: true */ }, { field: 'devTypeId', title: '设备类型'//设备类型ID }, { field: 'devSpecksId', title: '设备型号' }, { field: 'factory', title: '生产厂家' }, { field: 'assetCode', title: '固定资产编码' }, { field: 'devStatus', title: '设备状态', align: 'center', formatter: function (value, row, index) { return statusTools(row); } }, { field: 'wzCode', title: '物资编码', visible: false // 隐藏该列 }, { field: 'snCode', title: 'SN编码', visible: false // 隐藏该列 }, { title: '操作', align: 'center', visible: false, // 隐藏该列 formatter: function(value, row, index) { var actions = []; actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="editDevice(' + row.devId + ')"><i class="fa fa-edit"></i>编辑</a> '); actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(' + row.devId + ')"><i class="fa fa-remove"></i>删除</a>'); return actions.join(''); } } ] , onLoadSuccess: function(data) { // 表格数据加载成功后执行 if (data && data.rows.length > 0) { // 获取第一行数据 var firstRow = data.rows[0]; selectedDeviceId = firstRow.devId; console.log("第一行设备ID:", selectedDeviceId); } }, // 添加双击行的回调函数 /* onDblClickRow: function (row, $element) { selectedDeviceId = row.devId; editDevice(selectedDeviceId); } */ }; /* $.table.init(options); ButtonManager.toDevList(); */ reinitializeTable(options); ButtonManager.toDevList(); // 切换回新增按钮 $.table.search(); } function queryHistoryList() { var options = { url: prefix + "/list", createUrl: prefix + "/add", updateUrl: prefix + "/edit/{id}", removeUrl: prefix + "/remove", exportUrl: prefix + "/export", modalName: "安装历史", columns: [{ checkbox: true }, { field: 'locationId', title: '部门主键seq_gk_equipment_type', visible: false }, { field: 'parentId', title: '父层级id' }, { field: 'locationName', title: '设备类型名称' }, { field: 'status', title: '设备类型状态' }, { field: 'repairdept', title: '维护部门' }, { title: '操作', align: 'center', formatter: function(value, row, index) { var actions = []; actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.locationId + '\')"><i class="fa fa-edit"></i>编辑</a> '); actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.locationId + '\')"><i class="fa fa-remove"></i>删除</a>'); return actions.join(''); } }] }; $.table.init(options); $.table.search(); } function queryLocationTree() { var url = ctx + "system/devledger/treeData"; var options = { url: url, expandLevel: 2, onClick : zOnClick }; $.tree.init(options); function zOnClick(event, treeId, treeNode) { $("#devSiteId").val(treeNode.id); //$("#devSiteId").val(treeNode.pId); //$("#title").val(treeNode.pId); $.table.search(); } } $('#btnExpand').click(function() { $._tree.expandAll(true); $(this).hide(); $('#btnCollapse').show(); }); $('#btnCollapse').click(function() { $._tree.expandAll(false); $(this).hide(); $('#btnExpand').show(); }); $('#btnRefresh').click(function() { queryLocationTree(); }); /* 用户管理-部门 */ function dept() { var url = ctx + "system/type"; $.modal.openTab("设备类型管理", url); } /* 设备状态显示 */ function statusTools(row) { if (row.devStatus == "active") { return '在用'; } else if (row.devStatus == "tobeinstall") { return '待安装'; } else if (row.devStatus == "inactive") { return '停用'; }else if (row.devStatus == "discard") { return '报废'; //return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.userId + '\')"></i> '; } } /* 检修记录状态显示 */ function noticeStatus(row) { if (row.status == "09") { return '审批未通过'; } else if (row.status == "08") { return '审批通过'; } else if (row.status == "07") { return '审批中'; }else if (row.status == "06") { return '已退回'; }else if (row.status == "05") { return '已结束'; }else if (row.status == "04") { return '已处理'; }else if (row.status == "03") { return '处理中'; }else if (row.status == "02") { return '待处理'; }else if (row.status == "01") { return '未提交'; } } /* 检修记录紧急程度显示 */ function priorityStatus(row) { if (row.status == "02") { return '紧急'; } else if (row.status == "01") { return '一般'; } } </script> </body> <!-- 导入区域 --> <script id="importTpl" type="text/template"> <form enctype="multipart/form-data" class="mt20 mb10"> <div class="col-xs-offset-1"> <input type="file" id="file" name="file"/> <div class="mt10 pt5"> <input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在,更新这条数据。"> 是否更新已经存在的用户数据   <a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a> </div> <font color="red" class="pull-left mt10"> 提示:仅允许导入“xls”或“xlsx”格式文件! </font> </div> </form> </script> </html> 点击system:devledger:add打开第二个页签
11-06
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值