搜索到
196
篇与
的结果
-
导航页面 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>清爽导航</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; color: #333; } .container { width: 100%; max-width: 900px; background: rgba(255, 255, 255, 0.92); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); overflow: hidden; backdrop-filter: blur(10px); } header { text-align: center; padding: 30px 20px 20px; background: linear-gradient(to right, #4b6cb7, #6a93cb); color: white; } h1 { font-size: 2.5rem; font-weight: 300; letter-spacing: 1px; margin-bottom: 10px; } .subtitle { font-weight: 300; opacity: 0.9; font-size: 1.1rem; } .tabs { display: flex; background: #f0f5ff; border-bottom: 1px solid #e1e8f7; } .tab { flex: 1; text-align: center; padding: 18px 0; font-size: 1.1rem; font-weight: 500; color: #5a7ab5; cursor: pointer; transition: all 0.3s ease; position: relative; } .tab:hover { background: rgba(106, 147, 203, 0.1); } .tab.active { color: #4b6cb7; background: white; } .tab.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #4b6cb7; } .tab i { margin-right: 10px; font-size: 1.2rem; } .content { padding: 30px; min-height: 400px; } .tab-content { display: none; animation: fadeIn 0.5s ease; } .tab-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } h2 { color: #4b6cb7; margin-bottom: 20px; font-weight: 500; display: flex; align-items: center; } h2 i { margin-right: 12px; background: #eef4ff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } p { line-height: 1.8; color: #555; margin-bottom: 20px; font-size: 1.05rem; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; } .card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #eef2f7; } .card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(75, 108, 183, 0.15); } .card h3 { color: #4b6cb7; margin-bottom: 15px; display: flex; align-items: center; } .card h3 i { margin-right: 10px; color: #6a93cb; } .card ul { list-style: none; padding-left: 10px; } .card li { padding: 8px 0; border-bottom: 1px dashed #eaeff5; display: flex; align-items: center; } .card li:last-child { border-bottom: none; } .card li i { margin-right: 10px; color: #6a93cb; font-size: 0.9rem; } footer { text-align: center; padding: 20px; color: #7a8fb3; font-size: 0.9rem; border-top: 1px solid #eef2f7; background: #f9fbfe; } @media (max-width: 768px) { .tabs { flex-wrap: wrap; } .tab { flex: 1 0 50%; padding: 15px 0; } h1 { font-size: 2rem; } .content { padding: 20px; } } @media (max-width: 480px) { .tab { flex: 1 0 100%; } .card-grid { grid-template-columns: 1fr; } } </style> </head> <body> <div class="container"> <header> <h1>清爽导航</h1> <p class="subtitle">简洁高效 • 专注体验</p> </header> <div class="tabs"> <div class="tab active" data-tab="dashboard"> <i class="fas fa-home"></i>首页 </div> <div class="tab" data-tab="resources"> <i class="fas fa-book"></i>资源 </div> <div class="tab" data-tab="tools"> <i class="fas fa-tools"></i>工具 </div> <div class="tab" data-tab="settings"> <i class="fas fa-cog"></i>设置 </div> </div> <div class="content"> <!-- 首页内容 --> <div class="tab-content active" id="dashboard"> <h2><i class="fas fa-home"></i>欢迎使用清爽导航</h2> <p>这是一个简洁高效的导航页面，帮助您快速访问常用资源。设计注重用户体验和视觉舒适度，让您的日常操作更加流畅愉悦。</p> <div class="card-grid"> <div class="card"> <h3><i class="fas fa-rocket"></i>快捷入口</h3> <ul> <li><i class="fas fa-envelope"></i>邮箱服务</li> <li><i class="fas fa-calendar"></i>日程管理</li> <li><i class="fas fa-cloud"></i>云存储</li> <li><i class="fas fa-users"></i>团队协作</li> </ul> </div> <div class="card"> <h3><i class="fas fa-history"></i>最近访问</h3> <ul> <li><i class="fas fa-file-alt"></i>项目文档</li> <li><i class="fas fa-chart-bar"></i>数据分析</li> <li><i class="fas fa-shopping-cart"></i>在线商城</li> <li><i class="fas fa-video"></i>视频会议</li> </ul> </div> <div class="card"> <h3><i class="fas fa-bell"></i>通知提醒</h3> <ul> <li><i class="fas fa-check-circle"></i>任务已完成</li> <li><i class="fas fa-exclamation-circle"></i>系统更新</li> <li><i class="fas fa-user-plus"></i>新成员加入</li> <li><i class="fas fa-gift"></i>特别优惠</li> </ul> </div> </div> </div> <!-- 资源内容 --> <div class="tab-content" id="resources"> <h2><i class="fas fa-book"></i>学习资源</h2> <p>精选高质量学习资源，涵盖多个领域，助力您的知识成长与技能提升。</p> <div class="card-grid"> <div class="card"> <h3><i class="fas fa-laptop-code"></i>开发资源</h3> <ul> <li><i class="fab fa-github"></i>GitHub 开源项目</li> <li><i class="fas fa-code"></i>在线编程练习</li> <li><i class="fas fa-book-open"></i>技术文档</li> <li><i class="fas fa-video"></i>教学视频</li> </ul> </div> <div class="card"> <h3><i class="fas fa-paint-brush"></i>设计资源</h3> <ul> <li><i class="fas fa-palette"></i>配色方案</li> <li><i class="fas fa-font"></i>字体资源</li> <li><i class="fas fa-images"></i>图片素材</li> <li><i class="fas fa-cube"></i>3D模型</li> </ul> </div> <div class="card"> <h3><i class="fas fa-book"></i>电子书籍</h3> <ul> <li><i class="fas fa-globe"></i>网络技术</li> <li><i class="fas fa-brain"></i>人工智能</li> <li><i class="fas fa-chart-line"></i>商业经济</li> <li><i class="fas fa-heart"></i>文学艺术</li> </ul> </div> </div> </div> <!-- 工具内容 --> <div class="tab-content" id="tools"> <h2><i class="fas fa-tools"></i>实用工具</h2> <p>精选高效工具，提升您的工作效率和创造力，让复杂任务变得简单。</p> <div class="card-grid"> <div class="card"> <h3><i class="fas fa-calculator"></i>转换计算</h3> <ul> <li><i class="fas fa-ruler"></i>单位换算</li> <li><i class="fas fa-money-bill-wave"></i>货币转换</li> <li><i class="fas fa-percentage"></i>百分比计算</li> <li><i class="fas fa-clock"></i>时区转换</li> </ul> </div> <div class="card"> <h3><i class="fas fa-edit"></i>文档处理</h3> <ul> <li><i class="fas fa-file-pdf"></i>PDF工具</li> <li><i class="fas fa-file-image"></i>图片压缩</li> <li><i class="fas fa-file-word"></i>文档转换</li> <li><i class="fas fa-file-alt"></i>文本处理</li> </ul> </div> <div class="card"> <h3><i class="fas fa-chart-pie"></i>数据分析</h3> <ul> <li><i class="fas fa-table"></i>数据可视化</li> <li><i class="fas fa-chart-line"></i>图表生成</li> <li><i class="fas fa-calculator"></i>统计计算</li> <li><i class="fas fa-database"></i>数据清洗</li> </ul> </div> </div> </div> <!-- 设置内容 --> <div class="tab-content" id="settings"> <h2><i class="fas fa-cog"></i>系统设置</h2> <p>自定义您的导航体验，调整设置以满足您的个人偏好和工作需求。</p> <div class="card-grid"> <div class="card"> <h3><i class="fas fa-user"></i>账户设置</h3> <ul> <li><i class="fas fa-user-edit"></i>个人信息</li> <li><i class="fas fa-shield-alt"></i>安全设置</li> <li><i class="fas fa-bell"></i>通知偏好</li> <li><i class="fas fa-language"></i>语言设置</li> </ul> </div> <div class="card"> <h3><i class="fas fa-paint-brush"></i>外观设置</h3> <ul> <li><i class="fas fa-moon"></i>深色模式</li> <li><i class="fas fa-palette"></i>主题颜色</li> <li><i class="fas fa-font"></i>字体大小</li> <li><i class="fas fa-border-all"></i>布局调整</li> </ul> </div> <div class="card"> <h3><i class="fas fa-sliders-h"></i>高级设置</h3> <ul> <li><i class="fas fa-sync-alt"></i>数据同步</li> <li><i class="fas fa-keyboard"></i>快捷键</li> <li><i class="fas fa-plug"></i>插件管理</li> <li><i class="fas fa-database"></i>数据备份</li> </ul> </div> </div> </div> </div> <footer> <p>© 2023 清爽导航 | 简洁设计，高效体验</p> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { const tabs = document.querySelectorAll('.tab'); const tabContents = document.querySelectorAll('.tab-content'); tabs.forEach(tab => { tab.addEventListener('click', () => { // 移除所有活动状态 tabs.forEach(t => t.classList.remove('active')); tabContents.forEach(c => c.classList.remove('active')); // 添加当前活动状态 tab.classList.add('active'); const tabId = tab.getAttribute('data-tab'); document.getElementById(tabId).classList.add('active'); }); }); }); </script> </body> </html> -
天气API应用实例 //ajax请求api获取天气数据 function getWeather() { $.ajax({ type: "get", dataType: "json", url: "http://wthrcdn.etouch.cn/weather_mini?city=合肥", success: function (data) { var tips = data.data.ganmao; var today = data.data.forecast[0]; var tomorrow = data.data.forecast[1]; var afterTomorrow = data.data.forecast[2]; //填充数据 $("#tips").html("Tips:" + tips); //填充天气数据 setWeather(".today", today); setWeather(".tomorrow", tomorrow); setWeather(".afterTomorrow", afterTomorrow); //设置天气img的src matchType(today.type, ".today"); matchType(tomorrow.type, ".tomorrow"); matchType(afterTomorrow.type, ".afterTomorrow"); } }); } //提取json数据并填充到标签中 function setWeather(date,data) { $(date).find('p').eq(0).html(data.date); $(date).find('p').eq(1).html(data.type); $(date).find('p').eq(2).html(data.high); $(date).find('p').eq(3).html(data.low); } //正则匹配天气类型，修改天气img的src function matchType(type,date) { var rain = /\u96e8/; var sun = /\u6674/; var cloud = /\u4e91/; //var overcast = /\u9634/; var imgName = rain.test(type)?"rain":(sun.test(type)?"sun":(cloud.test(type)?"cloud":"overcast")); $(date).find('img').attr('src','__STATIC__/admin/images/'+imgName+'.png'); //console.log(imgName); }{include file="public/head" /} <style> .am-comment-footer{margin:5px 10px;color: #999;padding:0 2px;border-left:5px solid #ccc} .am-comment-footer a{color: #999;} .comment{border: 1px solid #dedede;margin-top: 10px} .am-comment-bd{padding: 5px 10px} .solid{border-left: 1px solid #ccc} .message{display: inline-block;margin-left: 50px} .weather img{margin-top: -150px} </style> <title>首页</title> </head> <body> <header class="am-topbar am-topbar-fixed-top wos-header"> <div class="am-container"> <h1 class="am-topbar-brand"> <a href="http://www.anhuihym.top" target="_blank"><img src="__STATIC__/images/logo.png"></a> </h1> {include file="public/nav" /} </div> </header> <div class="banner"> <div class="am-g am-container"> <!--轮播图--> <div class="am-u-sm-12 am-u-md-12 am-u-lg-8"> <div data-am-widget="slider" class="am-slider am-slider-c1" data-am-slider='{"directionNav":false}' > <ul class="am-slides"> {volist name="Slide" id="vo"} <li> <a href="{:url('index/NewsDetailController/index',array('id'=>$vo['id']))}"><img src="__STATIC__/news_imgs/{$vo.img}" class="am-u-sm-12 am-u-md-12 am-u-md-8" style="max-height: 455px;"></a> <div class="am-slider-desc">{$vo.title}</div> </li> {/volist} </ul> </div> </div> <!--主要部门--> <div class="am-u-sm-0 am-u-md-0 am-u-lg-4 padding-none"> <div class="star am-container"><span><img src="__STATIC__/images/star2.png">主要部门</span></div> <ul class="padding-none am-gallery am-avg-sm-2 am-avg-md-4 am-avg-lg-2 am-gallery-overlay" data-am-gallery="{ pureview: true }" > {volist name="mainDep" id="vo"} <li> <div class="am-gallery-item"> <a href="{:url('index/NewsListController/index',array('id'=>$vo['id']))}"> <img src="__STATIC__/images/lins.png"/> <h3 class="am-gallery-title">{$vo.name}</h3> </a> </div> </li> {/volist} </ul> </div> </div> </div> <div class="am-g am-container newatype"> <div class="am-u-sm-12 am-u-md-12 am-u-lg-8 oh"> <div data-am-widget="titlebar" class="am-titlebar am-titlebar-default" style="margin-bottom: 10px"> <h2 class="am-titlebar-title ">最新发布</h2> </div> {volist name="newsList" id="vo"} <ul class="am-list am-list-static am-list-border"> <li> <span class="am-badge am-badge-danger">NEW</span> <span class="am-badge am-badge-success am-radius">{$vo.type}</span> <span class="am-badge am-badge-secondary am-radius">{$vo.dep}</span> <span class="am-badge am-badge-error am-radius">{$vo.create_time}</span> <a href="{:url('index/NewsDetailController/index',array('id'=>$vo['id']))}" style="padding: 0">{$vo.title}</a> </li> </ul> {/volist} </div> <div class="am-u-sm-12 am-u-md-12 am-u-lg-4"> <div data-am-widget="titlebar" class="am-titlebar am-titlebar-default" style="margin-bottom: 10px"> <h2 class="am-titlebar-title ">最新评论</h2> </div> {volist name="commentList" id="vo"} <div class="comment"> <header class="am-comment-hd"> <div class="am-comment-meta"> <span class="am-comment-author">{$vo.staff_name}</span> 评论于 <time>{$vo.create_time}</time> </div> </header> <div class="am-comment-bd">{$vo.comment}</div> <div class="am-comment-footer"> <a href="{:url('index/NewsDetailController/index',array('id'=>$vo['id']))}" title="点击查看新闻详情">{$vo.title}</a> </div> </div> {/volist} </div> <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 oh"> <div data-am-widget="titlebar" class="am-titlebar am-titlebar-default" style="margin-bottom: 10px"> <h2 class="am-titlebar-title ">合肥天气 </h2> </div> <div class="am-u-md-12 weather"> <div class="today am-u-md-4"> <img src="__STATIC__/admin/images/sun.png" alt=""> <div class="message"> <p>今天</p> <p>天气</p> <p>最高</p> <p>最低</p> </div> </div> <div class="tomorrow solid am-u-md-4"> <img src="__STATIC__/admin/images/sun.png" alt="" > <div class="message"> <p>明天</p> <p>天气</p> <p>最高</p> <p>最低</p> </div> </div> <div class="afterTomorrow solid am-u-md-4"> <img src="__STATIC__/admin/images/sun.png" alt="" > <div class="message"> <p>后天</p> <p>天气</p> <p>最高</p> <p>最低</p> </div> </div> </div> </div> <div class="am-alert am-alert-secondary am-u-sm-12 am-u-md-12 am-u-lg-12" data-am-alert> <button type="button" class="am-close">×</button> <p id="tips"></p> </div> </div> <div data-am-widget="gotop" class="am-gotop am-gotop-fixed" > <a href="#top" title="回到顶部"> <span class="am-gotop-title">回到顶部</span> <i class="am-gotop-icon am-icon-chevron-up"></i> </a> </div> {include file="public/footer" /} </body> <script> //仪表盘数据 ajax定时获取 window.onload = function () { getWeather(); }; //ajax请求api获取天气数据 function getWeather() { $.ajax({ type: "get", dataType: "json", url: "http://wthrcdn.etouch.cn/weather_mini?city=合肥", success: function (data) { var tips = data.data.ganmao; var today = data.data.forecast[0]; var tomorrow = data.data.forecast[1]; var afterTomorrow = data.data.forecast[2]; //填充数据 $("#tips").html("Tips:" + tips); //填充天气数据 setWeather(".today", today); setWeather(".tomorrow", tomorrow); setWeather(".afterTomorrow", afterTomorrow); //设置天气img的src matchType(today.type, ".today"); matchType(tomorrow.type, ".tomorrow"); matchType(afterTomorrow.type, ".afterTomorrow"); } }); } //提取json数据并填充到标签中 function setWeather(date,data) { $(date).find('p').eq(0).html(data.date); $(date).find('p').eq(1).html(data.type); $(date).find('p').eq(2).html(data.high); $(date).find('p').eq(3).html(data.low); } //正则匹配天气类型，修改天气img的src function matchType(type,date) { var rain = /\u96e8/; var sun = /\u6674/; var cloud = /\u4e91/; //var overcast = /\u9634/; var imgName = rain.test(type)?"rain":(sun.test(type)?"sun":(cloud.test(type)?"cloud":"overcast")); $(date).find('img').attr('src','__STATIC__/admin/images/'+imgName+'.png'); //console.log(imgName); } </script> </html>
-
-
字符串核对 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字符串比较工具</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #8e8f93fc 100%, #8e8f93fc 100%); color: #333; min-height: 100vh; padding: 20px; display: flex; justify-content: center; align-items: center; } .container { width: 100%; max-width: 800px; background-color: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); overflow: hidden; } header { background: linear-gradient(to right, #514d4d, #514d4d); color: white; padding: 25px 30px; text-align: center; } h1 { font-size: 28px; margin-bottom: 8px; } .subtitle { font-size: 16px; opacity: 0.9; max-width: 600px; margin: 0 auto; } .content { padding: 30px; } .input-group { margin-bottom: 25px; } label { display: block; font-weight: 600; margin-bottom: 10px; color: #2c3e50; font-size: 18px; } textarea { width: 100%; height: 120px; padding: 15px; border: 2px solid #ddd; border-radius: 8px; font-size: 16px; resize: vertical; transition: border-color 0.3s; } textarea:focus { border-color: #3498db; outline: none; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); } .example { background-color: #f8f9fa; border-left: 4px solid #3498db; padding: 12px 15px; margin-top: 8px; border-radius: 0 4px 4px 0; font-size: 14px; } .example-title { font-weight: bold; margin-bottom: 5px; color: #2c3e50; } .actions { display: flex; justify-content: center; gap: 15px; margin-top: 20px; } button { padding: 14px 28px; font-size: 17px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .compare-btn { background: linear-gradient(to right, #35c1a9, #35c1a9); color: white; flex: 1; } .clear-btn { background: #514d4d; color: white; } button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } button:active { transform: translateY(0); } .compare-btn:hover { background: linear-gradient(to right, #009a87, #85b536); } .clear-btn:hover { background: #c0392b; } .result-container { margin-top: 30px; padding: 25px; border-radius: 10px; display: none; } .result-title { font-size: 20px; font-weight: bold; margin-bottom: 15px; display: flex; align-items: center; } .result-content { padding: 15px; border-radius: 8px; margin-top: 10px; font-size: 16px; line-height: 1.6; } .success { background-color: rgba(46, 204, 113, 0.1); border: 1px solid #2ecc71; color: #27ae60; } .error { background-color: rgba(231, 76, 60, 0.1); border: 1px solid #e74c3c; color: #c0392b; } .icon { margin-right: 10px; font-size: 24px; } .requirements { background-color: #f8f9fa; border-radius: 10px; padding: 20px; margin-top: 25px; } .requirements h3 { color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center; } .requirements ul { padding-left: 20px; } .requirements li { margin-bottom: 10px; line-height: 1.5; } footer { text-align: center; padding: 20px; color: #7f8c8d; font-size: 14px; border-top: 1px solid #eee; } @media (max-width: 600px) { .content { padding: 20px; } h1 { font-size: 24px; } .actions { flex-direction: column; } } </style> </head> <body> <div class="container"> <header> <h1>字符串比较工具</h1> <p class="subtitle">验证格式并比较两个字符串 - 检查第二个字符串是否是第一个字符串的子集</p> </header> <div class="content"> <div class="input-group"> <label for="str1">第一个字符串 (蓝本):</label> <textarea id="str1" placeholder="请输入第一个字符串，使用英文逗号分隔各项">3SV,实心胎(进口品牌),闪光警示灯,丰田样式悬浮座椅,高挂预滤器,高排气,VM330,3AP</textarea> </div> <div class="input-group"> <label for="str2">第二个字符串 (待比较):</label> <textarea id="str2" placeholder="请输入第二个字符串，使用英文逗号分隔各项">3SV,实心胎(进口品牌),闪光警示灯,丰田样式悬浮座椅,高挂预滤器,高排气</textarea> </div> <div class="actions"> <button class="compare-btn" onclick="compareStrings()"> <span class="icon">✓</span> 比较字符串 </button> <button class="clear-btn" onclick="clearInputs()"> <span class="icon">✕</span> 清空 </button> </div> <div id="result-container" class="result-container"> <div class="result-title"> <span class="icon" id="result-icon">?</span> <span id="result-title">结果</span> </div> <div id="result-content" class="result-content"></div> </div> <div class="requirements"> <h3>字符串要求</h3> <ul> <li>只能使用<strong>英文逗号</strong>作为分隔符（不允许中文逗号）</li> <li>字符串中<strong>不允许包含任何空格</strong></li> <li>第二个字符串必须是第一个字符串的<strong>子集</strong></li> <li>所有元素必须<strong>完全匹配</strong>（包括大小写和特殊字符）</li> <li>元素顺序<strong>不影响</strong>比较结果</li> </ul> </div> </div> </div> <script> function compareStrings() { const str1 = document.getElementById('str1').value.trim(); const str2 = document.getElementById('str2').value.trim(); const resultContainer = document.getElementById('result-container'); const resultContent = document.getElementById('result-content'); const resultTitle = document.getElementById('result-title'); const resultIcon = document.getElementById('result-icon'); // 清空之前的结果 resultContainer.style.display = 'none'; // 验证字符串1 const validation1 = validateString(str1, "第一个字符串"); if (!validation1.isValid) { showError(validation1.message, resultContainer, resultContent, resultTitle, resultIcon); return; } // 验证字符串2 const validation2 = validateString(str2, "第二个字符串"); if (!validation2.isValid) { showError(validation2.message, resultContainer, resultContent, resultTitle, resultIcon); return; } // 获取元素数组 const arr1 = str1.split(','); const arr2 = str2.split(','); // 检查第二个字符串是否是第一个字符串的子集 const missingElements = []; for (const element of arr2) { if (!arr1.includes(element)) { missingElements.push(element); } } // 检查结果并显示 if (missingElements.length === 0) { showSuccess("验证通过！第二个字符串是第一个字符串的子集。", resultContainer, resultContent, resultTitle, resultIcon); } else { showError(`第二个字符串包含第一个字符串中没有的元素：${missingElements.join(', ')}`, resultContainer, resultContent, resultTitle, resultIcon); } } function validateString(str, strName) { // 检查是否为空 if (str === '') { return { isValid: false, message: `${strName}不能为空！` }; } // 检查是否包含空格 if (/\s/.test(str)) { return { isValid: false, message: `${strName}包含空格！请移除所有空格。` }; } // 检查是否包含中文逗号 if (str.includes('，')) { return { isValid: false, message: `${strName}包含中文逗号！请使用英文逗号(,)。` }; } // 检查其他非法符号（只允许中文字符、英文字母、数字、英文逗号和括号） const illegalChars = str.match(/[^\u4e00-\u9fa5a-zA-Z0-9,()]/g); if (illegalChars && illegalChars.length > 0) { const uniqueChars = [...new Set(illegalChars)]; return { isValid: false, message: `${strName}包含非法字符：${uniqueChars.join('')}` }; } // 检查连续逗号或开头/结尾逗号 if (str.startsWith(',') || str.endsWith(',') || str.includes(',,')) { return { isValid: false, message: `${strName}格式错误：存在连续逗号或开头/结尾逗号` }; } return { isValid: true }; } function showError(message, container, content, title, icon) { container.style.display = 'block'; container.classList.remove('success'); container.classList.add('error'); content.innerHTML = message; title.textContent = '验证失败'; icon.textContent = '✕'; container.scrollIntoView({ behavior: 'smooth' }); } function showSuccess(message, container, content, title, icon) { container.style.display = 'block'; container.classList.remove('error'); container.classList.add('success'); content.innerHTML = message; title.textContent = '验证通过'; icon.textContent = '✓'; container.scrollIntoView({ behavior: 'smooth' }); } function clearInputs() { document.getElementById('str1').value = ''; document.getElementById('str2').value = ''; document.getElementById('result-container').style.display = 'none'; } </script> </body> </html>
-
0:00