关于网站建设的调查报告/网站推广郑州
正则表达式
介绍
正则表达式是用于匹配字符串中字符组合的模式，在JS中，正则表达式也是对象
通常用来查找，替换那些符合正则表达式的文本
就是筛选出符合条件的一类人
比如说
有人喜欢玩艾斯爱慕，那他喜欢的就是这一类人，而不是某个人
正则表达式在JS中的使用场景
验证表单：用户表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文匹配
可以过滤到页面中的一些敏感词（替换），或者从字符串中获取我们想要的特定部分
语法
我们想要根据规则去查找，如果找到就返回
正则同样的规则：
定义规则、查找
let str = 'S,M,艾斯爱慕'JS中定义正则表达式的语法有两种，我们先学习其中比较简单的方法
count 变量名 = /表达式///是正则表达式字面量
我们这样判断是否有符合规则的字符串
test()方法可以查看正则表达式与指定的字符串是否匹配
regObj.test(被检测的字符串)这是使用实例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const str = 'SM,S,M,艾斯爱慕'const reg = /M/console.log(reg.test(str)) //true</script>
</body>
</html>还有一个方法：exec()方法在一个指定字符串中执行一个搜索匹配
语法：
regObj.exec(被检测字符串)<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const str = 'SM,S,M,艾斯爱慕'const reg = /M/console.log(reg.exec(str)) //true</script>
</body>
</html>如果匹配成功，exec()方法返回一个数组，否则返回null
元字符
什么是元字符？
使用元字符有什么好处？
大多数的字符仅能够描述它们本身，这些字符称作普通字符，比如所有的字母和数字
普通字符只能够匹配字符串中与他们相同的字符
元字符是一些有特殊含义的字符，提高了灵活性和强大的匹配功能
比如：规定用户只能输入英文26个字母
元字符写法：[a-z]
参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions正则测试工具：
在线正则表达式测试OSCHINA.NET在线工具,ostools为开发设计人员提供在线工具，提供jsbin在线 CSS、JS 调试，在线 Java API文档,在线 PHP API文档,在线 Node.js API文档,Less CSS编译器，MarkDown编译器等其他在线工具
http://tool.oschina.net/regex
为了方便记忆和学习，元字符有这样的分类：
来看看边界符：是正则表达式中用来提示字符所处的位置，主要有两个字符
如果 ^ 和 $ 在一起，表示必须是精确匹配（孩子们这不是makefile吗）
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
这就是边界符，来看看量词：
量词是表示重复次数
用来设定某个模式出现的次数
逗号左右两侧千万不要出现空格
简洁记法：
字符类
[ ]匹配字符集合
后面的字符串只要包含abc中任意一个字符都返回true
[ ] 里面加上 - 连字符，使用连字符 - 表示一个范围
比如：
综合示例：
来看看字符类的：
[ ] 里面加上 ^ 取反符号
比如：
[^a-z] 匹配除了小写字母以外的字符
注意要写到中括号里面
. 表示匹配除换行符之外的任何单个字符
用户名验证案例
需求：
nextElementSibling是获取下一个兄弟元素（边学边忘）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {display: inline-block;width: 250px;height: 30px;vertical-align: middle;line-height: 30px;padding-left: 15px;}.error {color: red;background: url(./images/error1.png) no-repeat left center;}.right {color: green;background: url(./images/right.png) no-repeat left center;}</style>
</head><body><input type="text"><span></span><script>const reg = /^[a-zA-Z0-9-_]{6,16}$/const input = document.querySelector('input')const span = input.nextElementSiblinginput.addEventListener('blur',function(){if(reg.test(this.value)){span.innerHTML = '输入正确'span.className='right'}else{span.innerHTML = '请输入正确的格式'span.className = 'error'}})</script>
</body></html>昵称案例
我们需要要求用户只能输入中文：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {display: inline-block;width: 250px;height: 30px;vertical-align: middle;line-height: 30px;padding-left: 15px;}.error {color: red;background: url(./images/error1.png) no-repeat left center;}.right {color: green;background: url(./images/right.png) no-repeat left center;}</style>
</head><body><input type="text"><span></span><script>const reg = /^[\u4e00-\u9fa5]{2,8}$/const input = document.querySelector('input')const span = input.nextElementSiblinginput.addEventListener('blur', function () {if (reg.test(this.value)) {span.innerHTML = '输入正确'span.className = 'right'}else {span.innerHTML = '请输入正确的格式'span.className = 'error'}})</script>
</body></html>预定义：指的是某些常见模式的简写方法
就像是，记得的时候用不上，用上的时候已经忘
修饰符
修饰符约束正则执行的某些细节行为，比如是否区分大小写，是否支持多行匹配等
语法：
/表达式/修饰符i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
g 是单词 global 的缩写，匹配所有满足正则表达式的结果
替换replace：
字符串.replace(/正则表达式/,'替换的文本')过滤敏感字（不是，前端都在干些什么得罪人的活，广告跳转，多少秒之后才关闭，屏蔽敏感字。。。步道乐跑我恨你）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><textarea name="" cols="30" rows="10" id=""></textarea><button>发布</button><div></div><script>const tx = document.querySelector('textarea')const btn = document.querySelector('button')const div = document.querySelector('div')btn.addEventListener('click',function(){console.log(tx.value)tx.value.replace(/我操|寄吧|草泥马|傻逼|妈的/,'**')div.innerHTML = tx.value.replace(/我操|寄吧|草泥马|傻逼|妈的/g,'**')})</script>
</body>
</html>
综合案例
来仿写一个小兔仙儿的页面注册
让我们来分析一下业务模块：
短信验证码
需求一：
我们需要注意的是在点击的时候如果时间未到，那应该先禁用一下点击按钮的，，
我们可以通过一个变量进行控制
<script>// 发送短信验证码模块const code = document.querySelector('.code')let flag = true// 点击事件code.addEventListener('click', function () {if (flag) {flag = falselet i = 5code.innerHTML = `0${i}秒后重新获取`let timeId = setInterval(function () {i--code.innerHTML = `0${i}秒后重新获取`if (i === 0) {flag = trueclearInterval(timeId)code.innerHTML = `重新获取`}}, 1000)}})</script>验证用户名模块
需求：
//验证的是用户名// 获取用户表单const username = document.querySelector('[name=username]')// 使用change事件， 值发生变化的时候username.addEventListener('change',verifyName)// 封装函数function verifyName(){const span = username.nextElementSibling// 定规则const reg = /^[a-zA-Z0-9-_]{6,10}$/if(!reg.test(username.value)){span.innerHTML='输入不合法，请输入6~10位'return false}// 合法的，就清空spanspan.innerHTML = ' 'return true}验证手机号和密码框
让我们来看看这个捏
//验证码验证// 获取手机表单const codeInput = document.querySelector('[name=code]')// 使用change事件， 值发生变化的时候codeInput.addEventListener('change',verifycodeInput)// 封装函数function verifycodeInput(){const span = codeInput.nextElementSibling// 定规则const reg = /^\d{6}$/if(!reg.test(codeInput.value)){span.innerHTML='输入不合法，请输入6位数字'return false}// 合法的，就清空spanspan.innerHTML = ' 'return true}// 密码验证// 获取手机表单const password= document.querySelector('[name=password]')// 使用change事件， 值发生变化的时候password.addEventListener('change',verifypassword)// 封装函数function verifypassword(){const span = password.nextElementSibling// 定规则const reg = /^[a-zA-Z0-9-_]{6,20}$/if(!reg.test(password.value)){span.innerHTML='输入不合法，请输入6~20位数字，字母，符号组成的密码'return false}// 合法的，就清空spanspan.innerHTML = ' 'return true}// 密码再次验证// 获取手机表单const confirm= document.querySelector('[name=confirm]')// 使用change事件， 值发生变化的时候confirm.addEventListener('change',verifyPwd)// 封装函数function verifyPwd(){const span = confirm.nextElementSiblingif(confirm.value !== password.value){span.innerHTML='输入不一致'return false}// 合法的，就清空spanspan.innerHTML = ' 'return true}我同意和提交模块
接下来做我同意模块，又想到了。。。流氓软件
//我同意模块const agree = document.querySelector('.icon-queren')agree.addEventListener('click',function(){//切换类 原有的就删掉，没有就添加this.classList.toggle('icon-queren2')}) 
//提交模块const form = document.querySelector('form')form.addEventListener('submit',function(e){//判断是否勾选我同意模块，如果有就证明勾选了，没有就是没有if(!agree.classList.contains('icon-queren2')){return alert('请勾选同意协议')// 阻止提交e.preventDefault()}// 依次判断上面的每个框框，是否通过，只有一个没通过的就阻止if(!verifyName()) e.preventDefault()if(!verifyPhone()) e.preventDefault()if(!verifyPwd()) e.preventDefault()if(!verifycodeInput()) e.preventDefault()if(!verifypassword()) e.preventDefault()})全部代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>小兔鲜儿 - 新鲜 惠民 快捷!</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/register.css"><link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head><body><!-- 项部导航 --><div class="xtx_topnav"><div class="wrapper"><!-- 顶部导航 --><ul class="xtx_navs"><li><a href="./login.html">请先登录</a></li><li><a href="./register.html">免费注册</a></li><li><a href="./center-order.html">我的订单</a></li><li><a href="./center.html">会员中心</a></li><li><a href="javascript:;">帮助中心</a></li><li><a href="javascript:;">在线客服</a></li><li><a href="javascript:;"><i class="mobile sprites"></i>手机版</a></li></ul></div></div><!-- 头部 --><div class="xtx_header"><div class="wrapper"><!-- 网站Logo --><h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1><!-- 主导航 --><div class="xtx_navs"><ul class="clearfix"><li><a href="./index.html">首页</a></li><li><a href="./category01.html">生鲜</a></li><li><a href="./category01.html">美食</a></li><li><a href="./category01.html">餐厨</a></li><li><a href="./category01.html">电器</a></li><li><a href="./category01.html">居家</a></li><li><a href="./category01.html">洗护</a></li><li><a href="./category01.html">孕婴</a></li><li><a href="./category01.html">服装</a></li></ul></div><!-- 站内搜索 --><div class="xtx_search clearfix"><!-- 购物车 --><a href="./cart-none.html" class="xtx_search_cart sprites"><i>2</i></a><!-- 搜索框 --><div class="xtx_search_wrapper"><input type="text" placeholder="搜一搜" onclick="location.href='./search.html'"></div></div></div></div><div class="xtx-wrapper"><div class="container"><!-- 卡片 --><div class="xtx-card"><h3>新用户注册</h3><form class="xtx-form"><div data-prop="username" class="xtx-form-item"><span class="iconfont icon-zhanghao"></span><input name="username" type="text" placeholder="设置用户名称"><span class="msg"></span></div><div data-prop="phone" class="xtx-form-item"><span class="iconfont icon-shouji"></span><input name="phone" type="text" placeholder="输入手机号码 "><span class="msg"></span></div><div data-prop="code" class="xtx-form-item"><span class="iconfont icon-zhibiaozhushibiaozhu"></span><input name="code" type="text" placeholder="短信验证码"><span class="msg"></span><a class="code" href="javascript:;">发送验证码</a></div><div data-prop="password" class="xtx-form-item"><span class="iconfont icon-suo"></span><input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合"><span class="msg"></span></div><div data-prop="confirm" class="xtx-form-item"><span class="iconfont icon-suo"></span><input name="confirm" type="password" placeholder="请再次输入上面密码"><span class="msg"></span></div><div class="xtx-form-item pl50"><i class="iconfont icon-queren"></i>已阅读并同意<i>《用户服务协议》</i></div><div class="xtx-form-item"><button class="submit">下一步</button><!-- <a class="submit" href="javascript:;">下一步</a> --></div></form></div></div></div><!-- 公共底部 --><div class="xtx_footer clearfix"><div class="wrapper"><!-- 联系我们 --><div class="contact clearfix"><dl><dt>客户服务</dt><dd class="chat">在线客服</dd><dd class="feedback">问题反馈</dd></dl><dl><dt>关注我们</dt><dd class="weixin">公众号</dd><dd class="weibo">微博</dd></dl><dl><dt>下载APP</dt><dd class="qrcode"><img src="./uploads/qrcode.jpg"></dd><dd class="download"><span>扫描二维码</span><span>立马下载APP</span><a href="javascript:;">下载页面</a></dd></dl><dl><dt>服务热线</dt><dd class="hotline">400-0000-000<small>周一至周日 8:00-18:00</small></dd></dl></div></div><!-- 其它 --><div class="extra"><div class="wrapper"><!-- 口号 --><div class="slogan"><a href="javascript:;" class="price">价格亲民</a><a href="javascript:;" class="express">物流快捷</a><a href="javascript:;" class="quality">品质新鲜</a></div><!-- 版权信息 --><div class="copyright"><p><a href="javascript:;">关于我们</a><a href="javascript:;">帮助中心</a><a href="javascript:;">售后服务</a><a href="javascript:;">配送与验收</a><a href="javascript:;">商务合作</a><a href="javascript:;">搜索推荐</a><a href="javascript:;">友情链接</a></p><p>CopyRight © 小兔鲜儿</p></div></div></div></div><script>// 发送短信验证码模块const code = document.querySelector('.code')let flag = true// 点击事件code.addEventListener('click', function () {if (flag) {flag = falselet i = 5code.innerHTML = `0${i}秒后重新获取`let timeId = setInterval(function () {i--code.innerHTML = `0${i}秒后重新获取`if (i === 0) {flag = trueclearInterval(timeId)code.innerHTML = `重新获取`}}, 1000)}})//验证的是用户名// 获取用户表单const username = document.querySelector('[name=username]')// 使用change事件， 值发生变化的时候username.addEventListener('change',verifyName)// 封装函数function verifyName(){const span = username.nextElementSibling// 定规则const reg = /^[a-zA-Z0-9-_]{6,10}$/if(!reg.test(username.value)){span.innerHTML='输入不合法，请输入6~10位'return false}// 合法的，就清空spanspan.innerHTML = ' 'return true}// 验证手机号和密码框// 获取手机表单const phone = document.querySelector('[name=phone]')// 使用change事件， 值发生变化的时候phone.addEventListener('change',verifyPhone)// 封装函数function verifyPhone(){const span = phone.nextElementSibling// 定规则const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/if(!reg.test(phone.value)){span.innerHTML='输入不合法，请输入11位手机号'return false}// 合法的，就清空spanspan.innerHTML = ' 'return true}//验证码验证// 获取手机表单const codeInput = document.querySelector('[name=code]')// 使用change事件， 值发生变化的时候codeInput.addEventListener('change',verifycodeInput)// 封装函数function verifycodeInput(){const span = codeInput.nextElementSibling// 定规则const reg = /^\d{6}$/if(!reg.test(codeInput.value)){span.innerHTML='输入不合法，请输入6位数字'return false}// 合法的，就清空spanspan.innerHTML = ' 'return true}// 密码验证// 获取手机表单const password= document.querySelector('[name=password]')// 使用change事件， 值发生变化的时候password.addEventListener('change',verifypassword)// 封装函数function verifypassword(){const span = password.nextElementSibling// 定规则const reg = /^[a-zA-Z0-9-_]{6,20}$/if(!reg.test(password.value)){span.innerHTML='输入不合法，请输入6~20位数字，字母，符号组成的密码'return false}// 合法的，就清空spanspan.innerHTML = ' 'return true}// 密码再次验证// 获取手机表单const confirm= document.querySelector('[name=confirm]')// 使用change事件， 值发生变化的时候confirm.addEventListener('change',verifyPwd)// 封装函数function verifyPwd(){const span = confirm.nextElementSiblingif(confirm.value !== password.value){span.innerHTML='输入不一致'return false}// 合法的，就清空spanspan.innerHTML = ' 'return true}//我同意模块const agree = document.querySelector('.icon-queren')agree.addEventListener('click',function(){//切换类 原有的就删掉，没有就添加this.classList.toggle('icon-queren2')})//提交模块const form = document.querySelector('form')form.addEventListener('submit',function(e){//判断是否勾选我同意模块，如果有就证明勾选了，没有就是没有if(!agree.classList.contains('icon-queren2')){return alert('请勾选同意协议')// 阻止提交e.preventDefault()}// 依次判断上面的每个框框，是否通过，只有一个没通过的就阻止if(!verifyName()) e.preventDefault()if(!verifyPhone()) e.preventDefault()if(!verifyPwd()) e.preventDefault()if(!verifycodeInput()) e.preventDefault()if(!verifypassword()) e.preventDefault()})</script>
</body></html>阶段案例
登录页面
我们还要实现的是登录页面，先来实现tab栏切换
// tab栏切换,事件委托const tab_nav = document.querySelector('.tab-nav')const pane = document.querySelectorAll('.tab-pane')// 事件监听tab_nav.addEventListener('click', function (e) {if (e.target.tagName === 'A') {// 取消上一个// 当前元素添加activetab_nav.querySelector('.active').classList.remove('active')e.target.classList.add('active')// 显示和隐藏类// 先干掉所有人，使用for循环for (let i = 0; i < pane.length; i++) {pane[i].style.display = 'none'}//让对应序号的大pane显示pane[e.target.dataset.id].style.display = 'block'}})然后来做点击登录可以跳转页面
// 点击提交模块const form = document.querySelector('form')const agree = document.querySelector('[name=agree]')const username = document.querySelector('[name=username]')form.addEventListener('submit',function(e){e.preventDefault()if(!agree.checked){return alert('请勾选同意协议')}// 记录用户名到本地存储(没有后台数据)localStorage.setItem('xtx-uname',username.value)//跳转到首页location.href = './index.html'})全部代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>小兔鲜儿 - 新鲜 惠民 快捷!</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit"><link rel="shortcut icon" href="../favicon.ico"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/login.css"><link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head><body><!-- 登录头部 --><div class="xtx-login-header"><h1 class="logo"></h1><a class="home" href="./index.html">进入网站首页</a></div><!-- 登录内容 --><div class="xtx-login-main"><div class="wrapper"><form action="" autocomplete="off"><div class="box"><div class="tab-nav"><a href="javascript:;" class="active" data-id="0">账户登录</a><a href="javascript:;" data-id="1">二维码登录</a></div><div class="tab-pane"><div class="link"><a href="javascript:;">手机验证码登录</a></div><div class="input"><span class="iconfont icon-zhanghao"></span><input required type="text" placeholder="请输入用户名称/手机号码" name="username"></div><div class="input"><span class="iconfont icon-suo"></span><input required type="password" placeholder="请输入密码" name="password"></div><div class="agree"><label for="my-checkbox"><input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree"><span class="iconfont icon-xuanze"></span></label>我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a></div><div class="button clearfix"><button type="submit" class="dl">登 录</button><!-- <a class="dl" href="./center.html">登 录</a> --><a class="fl" href="./forget.html">忘记密码？</a><a class="fr" href="./register.html">免费注册</a></div></div><div class="tab-pane" style="display: none;"><img class="code" src="./images/code.png" alt=""></div></div></form></div></div><!-- 登录底部 --><div class="xtx-login-footer"><!-- 版权信息 --><div class="copyright"><p><a href="javascript:;">关于我们</a><a href="javascript:;">帮助中心</a><a href="javascript:;">售后服务</a><a href="javascript:;">配送与验收</a><a href="javascript:;">商务合作</a><a href="javascript:;">搜索推荐</a><a href="javascript:;">友情链接</a></p><p>CopyRight © 小兔鲜儿</p></div></div><script>// tab栏切换,事件委托const tab_nav = document.querySelector('.tab-nav')const pane = document.querySelectorAll('.tab-pane')// 事件监听tab_nav.addEventListener('click', function (e) {if (e.target.tagName === 'A') {// 取消上一个// 当前元素添加activetab_nav.querySelector('.active').classList.remove('active')e.target.classList.add('active')// 显示和隐藏类// 先干掉所有人，使用for循环for (let i = 0; i < pane.length; i++) {pane[i].style.display = 'none'}//让对应序号的大pane显示pane[e.target.dataset.id].style.display = 'block'}})// 点击提交模块const form = document.querySelector('form')const agree = document.querySelector('[name=agree]')const username = document.querySelector('[name=username]')form.addEventListener('submit',function(e){e.preventDefault()if(!agree.checked){return alert('请勾选同意协议')}// 记录用户名到本地存储(没有后台数据)localStorage.setItem('xtx-uname',username.value)//跳转到首页location.href = './index.html'})</script>
</body></html>首页页面
需求：
从登录页面跳转过来之后，自动显示用户名
如果点击退出，则不显示用户名
一些东西：
<script>//获取第一个liconst li1 = document.querySelector('.xtx_navs li:first-child')const li2 = li1.nextElementSibling//最好做一个渲染函数 function render(){//读取本地存储的用户名const uname = localStorage.getItem('xtx-uname')if(uname){li1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user"> ${uname}</i></a>`li2.innerHTML = '<a href="javascript:;">退出登录</a>'} else{li1.innerHTML = '<a href="./login.html">请先登录</a>'li2.innerHTML = '<a href="./register.html">免费注册</a>'}}render()//点击退出登录模块li2.addEventListener('click',function(){// 删除本地存储的数据localStorage.removeItem('xtx-uname')// 重新渲染render()})</script>所有代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>小兔鲜儿 - 新鲜 惠民 快捷!</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css"><script>// 检测 userAgent（浏览器信息）!(function () {const userAgent = navigator.userAgent// 验证是否为Android或iPhoneconst android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)// 如果是Android或iPhone，则跳转至移动站点if (android || iphone) {location.href = 'http://m.itcast.cn'}})()</script>
</head><body><!-- 项部导航 --><div class="xtx_topnav"><div class="wrapper"><!-- 顶部导航 --><ul class="xtx_navs"><li><a href="./login.html">请先登录</a></li><li><a href="./register.html">免费注册</a></li><li><a href="./center-order.html">我的订单</a></li><li><a href="./center.html">会员中心</a></li><li><a href="javascript:;">帮助中心</a></li><li><a href="javascript:;">在线客服</a></li><li><a href="javascript:;"><i class="mobile sprites"></i>手机版</a></li></ul></div></div><!-- 头部 --><div class="xtx_header"><div class="wrapper"><!-- 网站Logo --><h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1><!-- 主导航 --><div class="xtx_navs"><ul class="clearfix"><li><a href="./index.html">首页</a></li><li><a href="./category01.html">生鲜</a></li><li><a href="./category01.html">美食</a></li><li><a href="./category01.html">餐厨</a></li><li><a href="./category01.html">电器</a></li><li><a href="./category01.html">居家</a></li><li><a href="./category01.html">洗护</a></li><li><a href="./category01.html">孕婴</a></li><li><a href="./category01.html">服装</a></li></ul></div><!-- 站内搜索 --><div class="xtx_search clearfix"><!-- 购物车 --><a href="./cart-none.html" class="xtx_search_cart sprites"><i>2</i></a><!-- 搜索框 --><div class="xtx_search_wrapper"><input type="text" placeholder="搜一搜" onclick="location.href='./search.html'"></div></div></div></div><!-- 分类及焦点图 --><div class="xtx_entry"><div class="wrapper"><!-- 分类 --><div class="xtx_category"><!-- 顶级分类 --><ul class="xtx_category_super"><li><a href="javascript:;">生鲜<small>水果</small><small>蔬菜</small></a><i class="sprites"></i></li><li class="active"><a href="javascript:;">美食<small>面点</small><small>干果</small></a><i class="sprites"></i></li><li><a href="javascript:;">电器<small>数码产品</small></a><i class="sprites"></i></li><li><a href="javascript:;">居家<small>床品</small><small>四件套</small><small>被枕</small></a><i class="sprites"></i></li><li><a href="javascript:;">洗护<small>洗发洗护</small><small>美妆</small></a><i class="sprites"></i></li><li><a href="javascript:;">孕婴<small>奶粉</small><small>玩具</small><small>辅食</small></a><i class="sprites"></i></li><li><a href="javascript:;">餐橱<small>数码产品</small></a><i class="sprites"></i></li><li><a href="javascript:;">服饰<small>女装</small><small>男装</small></a><i class="sprites"></i></li><li><a href="javascript:;">杂货<small>户外</small><small>图书</small></a><i class="sprites"></i></li><li><a href="javascript:;">品牌<small>品牌制造</small></a><i class="sprites"></i></li></ul><!-- 子分类 --><div class="xtx_category_subset"></div></div><!-- 焦点图 --><div class="xtx_banner"><ul><li><a href="javascript:;"><img src="./uploads/banner_1.png" alt=""></a></li></ul><!-- 切换按钮 --><a href="javascript:;" class="prev sprites"></a><a href="javascript:;" class="next sprites"></a><!-- 指示器 --><div class="indicator"><span></span><span></span><span class="active"></span><span></span><span></span></div></div></div></div><!-- 新鲜好物 --><div class="xtx_goods_new xtx_panel"><div class="wrapper"><!-- 面板头部 --><div class="xtx_panel_header"><h3>新鲜好物<small>新鲜出炉 品质靠谱</small></h3><a href="./index-new.html" class="more">查看全部<i class="sprites"></i></a></div><!-- 商品列表 --><div class="xtx_panel_goods_1"><a href="javascript:;"><img src="./uploads/new_goods_1.jpg" alt=""><span class="name">睿米无线吸尘器F8</span><span class="price"><small>￥</small>899</span></a><a href="javascript:;"><img src="./uploads/new_goods_2.jpg" alt=""><span class="name">智能环绕3D空调</span><span class="price"><small>￥</small>1299</span></a><a href="javascript:;"><img src="./uploads/new_goods_3.jpg" alt=""><span class="name">广东软软糯米煲仔饭</span><span class="price"><small>￥</small>129</span></a><a href="javascript:;"><img src="./uploads/new_goods_4.jpg" alt=""><span class="name">罗西机械智能手表</span><span class="price"><small>￥</small>3399</span></a></div></div></div><!-- 人气推荐 --><div class="xtx_goods_popular xtx_panel"><div class="wrapper"><!-- 面板头部 --><div class="xtx_panel_header"><h3>人气推荐<small>人气爆款 不容错过</small></h3></div><!-- 商品列表 --><div class="xtx_panel_goods_1"><a href="javascript:;"><img src="./uploads/popular_1.jpg"><span class="title">特惠推荐</span><span class="alt">我猜得到 你的需要</span></a><a href="./index-hot.html"><img src="./uploads/popular_2.jpg"><span class="title">爆款推荐</span><span class="alt">人气好物推荐</span></a><a href="./index-one.html"><img src="./uploads/popular_3.jpg"><span class="title">场景使用一站买全</span><span class="alt">编辑精心整理推荐</span></a><a href="javascript:;"><img src="./uploads/popular_4.jpg"><span class="title">领券中心</span><span class="alt">发现更多超值优惠券</span></a></div></div></div><!-- 热门品牌 --><div class="xtx_goods_brand xtx_panel"><div class="wrapper"><div class="xtx_panel_header"><h3>热门品牌<small>国际经典 品质保证</small></h3><div class="page-bar"><a href="javascript:;" class="prev sprites"></a><a href="javascript:;" class="next sprites active"></a></div></div><!-- 商品列表 --><div class="xtx_goods"><ul><li><a href="./index-brand.html"><img src="./uploads/brand_goods_1.jpg" alt=""></a><a href="./brand-list.html"><img src="./uploads/brand_goods_2.jpg" alt=""></a><a href="javascript:;"><img src="./uploads/brand_goods_3.jpg" alt=""></a><a href="javascript:;"><img src="./uploads/brand_goods_4.jpg" alt=""></a><a href="javascript:;"><img src="./uploads/brand_goods_5.jpg" alt=""></a></li></ul></div></div></div><!-- 分类商品 --><div class="xtx_goods_category xtx_panel"><div class="wrapper"><!-- 生鲜 --><div class="xtx_panel_header"><h3>生鲜</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a><div class="tabs-bar"><a href="javascript:;" class="active">水果</a><a href="javascript:;">蔬菜</a><a href="javascript:;">肉禽蛋</a><a href="javascript:;">裤装</a><a href="javascript:;">衬衫</a><a href="javascript:;">内衣</a></div></div><!-- 商品列表 --><div class="xtx_panel_goods_2"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/fresh_goods_cover.jpg" alt=""></a><div class="label"><span>生鲜馆</span><span>全场3件8折</span></div></li><li><!-- 商品图片 --><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_1.jpg" alt=""></div></a><!-- 商品信息 --><div class="meta"><p class="name">美威 智利原味三文鱼排 240g/袋 4片装</p><p class="flag">海鲜年货</p><p class="price"><small>￥</small>59</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_2.jpg" alt=""></div></a><div class="meta"><p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</p><p class="flag">火锅食材</p><p class="price"><small>￥</small>71.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_3.jpg" alt=""></div></a><div class="meta"><p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p><p class="flag">海鲜水产</p><p class="price"><small>￥</small>49.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_4.jpg" alt=""></div></a><div class="meta"><p class="name">渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海</p><p class="flag">海鲜年货</p><p class="price"><small>￥</small>899</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_5.jpg" alt=""></div></a><div class="meta"><p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g </p><p class="flag"></p><p class="price"><small>￥</small>29</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_6.jpg" alt=""></div></a><div class="meta"><p class="name">广西沃柑 柑橘1.5kg</p><p class="flag">新鲜水果</p><p class="price"><small>￥</small>59</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_7.jpg" alt=""></div></a><div class="meta"><p class="name">进口 牛油果 6个装 单果重约130-180g</p><p class="flag">新鲜水果</p><p class="price"><small>￥</small>39.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_8.jpg" alt=""></div></a><div class="meta"><p class="name">泰国进口山竹5A级 500g </p><p class="flag">新鲜水果</p><p class="price"><small>￥</small>29.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li></ul></div><!-- 服饰 --><div class="xtx_panel_header"><h3>服饰</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a><div class="tabs-bar"><a href="javascript:;" class="active">行李箱</a><a href="javascript:;">男士包袋</a><a href="javascript:;">女士包袋</a><a href="javascript:;">钱包及小提袋</a><a href="javascript:;">男鞋</a><a href="javascript:;">女鞋</a><a href="javascript:;">拖鞋</a></div></div><!-- 商品列表 --><div class="xtx_panel_goods_2"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/clothes_goods_cover.jpg" alt=""></a><div class="label"><span>服饰馆</span><span>3折狂欢</span></div></li><li><!-- 商品图片 --><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_1.jpg" alt=""></div></a><!-- 商品信息 --><div class="meta"><p class="name">人本秋季厚底帆布鞋 韩版低帮增高学生</p><p class="flag"></p><p class="price"><small>￥</small>55</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_2.jpg" alt=""></div></a><div class="meta"><p class="name">迪士尼真皮针扣表带宽度 14-16mm规格双色压纹 女表带</p><p class="flag">海鲜年货</p><p class="price"><small>￥</small>20.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_3.jpg" alt=""></div></a><div class="meta"><p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p><p class="flag">海鲜水产</p><p class="price"><small>￥</small>209</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_4.jpg" alt=""></div></a><div class="meta"><p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p><p class="flag"></p><p class="price"><small>￥</small>274.5</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_5.jpg" alt=""></div></a><div class="meta"><p class="name">拉夫劳伦t恤男正品 </p><p class="flag">圆领短袖</p><p class="price"><small>￥</small>99</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_6.jpg" alt=""></div></a><div class="meta"><p class="name">李宁跑步鞋男鞋空气 弧2018春季款</p><p class="flag"></p><p class="price"><small>￥</small>79</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_7.jpg" alt=""></div></a><div class="meta"><p class="name">Dickies男鞋2020春季 英伦休闲工装鞋低帮</p><p class="flag"></p><p class="price"><small>￥</small>179</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_8.jpg" alt=""></div></a><div class="meta"><p class="name">北极绒春夏季纯棉背心 男士修身纯色打底</p><p class="flag"></p><p class="price"><small>￥</small>69</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li></ul></div><!-- 餐厨 --><div class="xtx_panel_header"><h3>餐厨</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a><div class="tabs-bar"><a href="javascript:;" class="active">水果</a><a href="javascript:;">蔬菜</a><a href="javascript:;">肉禽蛋</a><a href="javascript:;">裤装</a><a href="javascript:;">衬衫</a><a href="javascript:;">内衣</a></div></div><!-- 商品列表 --><div class="xtx_panel_goods_2"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/kitchen_goods_cover.jpg" alt=""></a><div class="label"><span>餐厨馆</span><span>大额优惠<br>等你来拿</span></div></li><li><!-- 商品图片 --><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_1.jpg" alt=""></div></a><!-- 商品信息 --><div class="meta"><p class="name">创意可爱不锈钢便携餐具 套装筷子便携三件套</p><p class="flag"></p><p class="price"><small>￥</small>5.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_2.jpg" alt=""></div></a><div class="meta"><p class="name">三金西瓜霜竹炭牙刷软毛 成人家用家庭装</p><p class="flag"></p><p class="price"><small>￥</small>20.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_3.jpg" alt=""></div></a><div class="meta"><p class="name">朴（TOPOTO）大卫免手 洗平板拖把拓扑懒人木地 板刮刮乐桶拖布</p><p class="flag"></p><p class="price"><small>￥</small>129</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_4.jpg" alt=""></div></a><div class="meta"><p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p><p class="flag"></p><p class="price"><small>￥</small>274.5</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_5.jpg" alt=""></div></a><div class="meta"><p class="name">金纺不伤手柔顺剂 妈妈的选择</p><p class="flag"></p><p class="price"><small>￥</small>29</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_6.jpg" alt=""></div></a><div class="meta"><p class="name">洁成绵柔抹布洗碗巾超 值5片装 洗锅刷碗</p><p class="flag"></p><p class="price"><small>￥</small>10.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_7.jpg" alt=""></div></a><div class="meta"><p class="name">大卫双驱动旋转拖把桶 免手洗拓扑拖布地拖墩布 </p><p class="flag"></p><p class="price"><small>￥</small>159</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_8.jpg" alt=""></div></a><div class="meta"><p class="name">斧头牌（AXE）去污地板 清洁剂2L 柠檬清香 </p><p class="flag">海鲜年货</p><p class="price"><small>￥</small>22.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li></ul></div><!-- 居家 --><div class="xtx_panel_header"><h3>居家</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a><div class="tabs-bar"><a href="javascript:;" class="active">咖啡具</a><a href="javascript:;">水具酒具</a><a href="javascript:;">锅具</a><a href="javascript:;">餐具</a><a href="javascript:;">功能厨具</a><a href="javascript:;">茶具</a><a href="javascript:;">清洁保鲜</a></div></div><!-- 商品列表 --><div class="xtx_panel_goods_2"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/home_goods_cover.jpg" alt=""></a><div class="label"><span>居家馆</span><span>全场满减</span></div></li><li><!-- 商品图片 --><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_1.jpg" alt=""></div></a><!-- 商品信息 --><div class="meta"><p class="name">菜鸟异常专用链接 非请 勿拍</p><p class="flag">海鲜年货</p><p class="price"><small>￥</small>8999</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_2.jpg" alt=""></div></a><div class="meta"><p class="name">【中盐软水盐】汉斯希 尔家用软水机适配</p><p class="flag"></p><p class="price"><small>￥</small>65</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_3.jpg" alt=""></div></a><div class="meta"><p class="name">云米净水壶家用直饮台式 净水机渗透过滤自来水</p><p class="flag">海鲜年货</p><p class="price"><small>￥</small>129</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_4.jpg" alt=""></div></a><div class="meta"><p class="name">ztk恒温调奶器配件玻璃壶 炖盅</p><p class="flag">海鲜年货</p><p class="price"><small>￥</small>129</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_5.jpg" alt=""></div></a><div class="meta"><p class="name">荞麦枕头单人枕芯双人 护颈椎枕头芯</p><p class="flag"></p><p class="price"><small>￥</small>29</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_6.jpg" alt=""></div></a><div class="meta"><p class="name">Bear/小熊 LLJ-B04G1 家用多功能切碎机 电动</p><p class="flag">料理机</p><p class="price"><small>￥</small>10.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_7.jpg" alt=""></div></a><div class="meta"><p class="name">荣事达薄饼机春饼春卷皮 家用博饼机电饼铛 </p><p class="flag"></p><p class="price"><small>￥</small>159</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_8.jpg" alt=""></div></a><div class="meta"><p class="name">美式双人实木床 红实木 显档次</p><p class="flag"></p><p class="price"><small>￥</small>22.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>发现现多宝贝></span></a></div></li></ul></div></div></div><!-- 最新主题 --><div class="xtx_goods_topic xtx_panel"><div class="wrapper"><div class="xtx_panel_header"><h3>最新专题</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a></div><div class="xtx_topic"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/topic_goods_1.jpg" alt=""><div class="meta"><p class="title">吃这些美食才不算辜负自己<small>餐厨起居洗护好物</small></p><span class="price"><small>￥</small>29.9起</span></div></a><div class="social"><span class="like"><i class="sprites"></i>1220</span><span class="view"><i class="sprites"></i>1800</span><span class="reply"><i class="sprites"></i>1220</span></div></li><li><a href="javascript:;"><img src="./uploads/topic_goods_2.jpg" alt=""><div class="meta"><p class="title">吃这些美食才不算辜负自己<small>餐厨起居洗护好物</small></p><span class="price"><small>￥</small>29.9起</span></div></a><div class="social"><span class="liked"><i class="sprites"></i>1220</span><span class="view"><i class="sprites"></i>1800</span><span class="reply"><i class="sprites"></i>1220</span></div></li><li><a href="javascript:;"><img src="./uploads/topic_goods_3.jpg" alt=""><div class="meta"><p class="title">吃这些美食才不算辜负自己<small>餐厨起居洗护好物</small></p><span class="price"><small>￥</small>29.9起</span></div></a><div class="social"><span class="like"><i class="sprites"></i>1220</span><span class="view"><i class="sprites"></i>1800</span><span class="reply"><i class="sprites"></i>1220</span></div></li></ul></div></div></div><!-- 公共底部 --><div class="xtx_footer clearfix"><div class="wrapper"><!-- 联系我们 --><div class="contact clearfix"><dl><dt>客户服务</dt><dd class="chat">在线客服</dd><dd class="feedback">问题反馈</dd></dl><dl><dt>关注我们</dt><dd class="weixin">公众号</dd><dd class="weibo">微博</dd></dl><dl><dt>下载APP</dt><dd class="qrcode"><img src="./uploads/qrcode.jpg"></dd><dd class="download"><span>扫描二维码</span><span>立马下载APP</span><a href="javascript:;">下载页面</a></dd></dl><dl><dt>服务热线</dt><dd class="hotline">400-0000-000<small>周一至周日 8:00-18:00</small></dd></dl></div></div><!-- 其它 --><div class="extra"><div class="wrapper"><!-- 口号 --><div class="slogan"><a href="javascript:;" class="price">价格亲民</a><a href="javascript:;" class="express">物流快捷</a><a href="javascript:;" class="quality">品质新鲜</a></div><!-- 版权信息 --><div class="copyright"><p><a href="javascript:;">关于我们</a><a href="javascript:;">帮助中心</a><a href="javascript:;">售后服务</a><a href="javascript:;">配送与验收</a><a href="javascript:;">商务合作</a><a href="javascript:;">搜索推荐</a><a href="javascript:;">友情链接</a></p><p>CopyRight © 小兔鲜儿</p></div></div></div></div><script>//获取第一个liconst li1 = document.querySelector('.xtx_navs li:first-child')const li2 = li1.nextElementSibling//最好做一个渲染函数 function render(){//读取本地存储的用户名const uname = localStorage.getItem('xtx-uname')if(uname){li1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user"> ${uname}</i></a>`li2.innerHTML = '<a href="javascript:;">退出登录</a>'} else{li1.innerHTML = '<a href="./login.html">请先登录</a>'li2.innerHTML = '<a href="./register.html">免费注册</a>'}}render()//点击退出登录模块li2.addEventListener('click',function(){// 删除本地存储的数据localStorage.removeItem('xtx-uname')// 重新渲染render()})</script>
</body></html>相关文章：
JS听到了强运的回响
正则表达式 介绍 正则表达式是用于匹配字符串中字符组合的模式，在JS中，正则表达式也是对象 通常用来查找，替换那些符合正则表达式的文本 就是筛选出符合条件的一类人 比如说 有人喜欢玩艾斯爱慕，那他喜欢的就是这一类人&…...
Linux下MySQL的简单使用
Linux下MySQL的简单使用 导语MySQL安装与配置 MySQL安装密码设置 MySQL管理 命令 myisamchkmysql其他 常见操作 C语言访问MYSQL 连接例程错误处理使用SQL 总结参考文献 导语 这一章是MySQL的使用，一些常用的MySQL语句属于本科阶段内容，然后是C语言和M…...
.net core使用AutoMapper
AutoMapper 是一个用于 .NET 平台的对象映射工具，它简化了不同对象类型之间的转换过程。在软件开发中，尤其是在分层架构的应用程序里，常常需要在不同的对象模型之间进行数据传递，例如从数据库实体到视图模型、DTO（数据…...
nmap详解
Nmap（Network Mapper）是一个开放源代码的网络探测和安全审核的工具。由于它的功能强大，被广泛应用于网络安全领域。以下是Nmap的一些主要功能及其在实战中的应用举例。 Nmap的主要功能： 端口扫描：检测目标主机上开放…...
CentOS7环境安装php
直接安装 yum -y install php CentOS7默认安装是php5，现在php已有8.3版本 先查看php -v 版本 如果是低版本，可以删除 yum remove php yum remove php-fpm yum remove php-common 一、添加REMI存储库 yum install epel-release yum install -y …...
基于深度学习的猫狗识别系统【深度学习课设】
🏆 作者简介：席万里 ⚡ 个人网站：https://dahua.bloggo.chat/ ✍️ 一名后端开发小趴菜，同时略懂Vue与React前端技术，也了解一点微信小程序开发。 🍻 对计算机充满兴趣，愿意并且希望学习更多的技…...
字体子集化实践探索
最近项目rust生成PDF组件printpdf需要内嵌完整字体导致生成的PDF很大，需要做压缩，但是rust的类库allsorts::subset::subset不支持windows，所以做了一些windows下字体子集化的尝试 方案一：node.js做子集化 fontmin 缺点是也需要集…...
A1017 基于Java+JSP+SQL Server+servlet的二手购物平台的设计与实现
二手购物平台 1.摘要2.开发目的和意义3.系统功能设计4.系统界面截图5.源码获取 1.摘要 摘 要 计算机以及网络技术的飞速发展，网络的应用在全国乃至全球日益普及，随着人们的思想水平和生活水平的提高，网络已经是人们必不可少的一部分。人们的…...
Simdroid-EC：液冷仿真新星，助力新能源汽车电机控制器高效散热
近年来，新能源电动车的销量呈现出快速增长的态势。据统计，2024 年1-10月中国新能源汽车销量达728万辆，同比增长37.8%。 电机控制器在新能源汽车中对于保障动力和安全性能扮演着至关重要的角色，其核心部件IGBT（绝缘栅双…...
C语言——实现并求出两个数的最大公约数
问题描述：求出两个数的最大公约数 //求两个数的最大公约数 #include<stdio.h> #include<stdlib.h> #include<string.h> #include<math.h> #include<time.h>int main() {int a,b;printf("请您输入两个数 a 和 b\n");scanf…...
今天你学C++了吗？——C++中的类与对象（日期类的实现）——实践与知识的碰撞❤
♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨ 个…...
享元模式的理解和实践
在软件开发中，性能优化是一个永恒的话题。在追求高性能的过程中，减少内存的使用是一项重要的任务。享元模式（Flyweight Pattern）就是一种用于减少内存使用量的设计模式，它特别适用于存在大量重复对象的场景。本文将详细…...
Unreal Engine 中的UI界面开发
推荐的使用方式 轻量级 HUD：使用 Canvas 绘制简单的文本、调试信息或基础 UI（如准星、血量条等）。 复杂 UI：使用 UMG（Unreal Motion Graphics）和 Slate 进行布局和交互，避免手动管理 Canvas 绘制。 避免遮挡场景：仅绘制必要的内容，并利用透明度（如 FLinearColor(1, 1…...
Docker在Ubuntu和CentOS系统下的安装
目录 1. 各版本平台支持情况2. 在Ubuntu系统下安装docker3. 常见报错4. Docker的镜像源修改5. Docker目录修改6. 在CentOS系统下安装docker 1. 各版本平台支持情况 （1）平台支持情况如下： Server 版本 桌面版本 2. 在Ubuntu系统下安装docker…...
EXCEL 关于plot 折线图--频度折线图的一些细节
目录 0 折线图有很多 1 频度折线图 1.1 直接用原始数据做的频度折线图 2 将原始数据生成数据透视表 3 这样可以做出了，频度plot 4 做按某字段汇总，成为累计plot分布 5 修改上面显示效果，做成百分比累计plot频度分布 0 折线图有很多 这…...
Hive操作案例
目录 idea/dg远程连接导入数据建表数据导入 idea/dg远程连接 hive的详细安装不多展示，自行搜索即可。 依次启动zookeeper，hadoop 在zookeeper的节点上启动如下指令（我的是1个主节点和2个备用节点） 启动Hive的metastore࿰…...
C++ 内存管理和模板与STL
此篇目是之后各种C库的基础 目录 内存管理 内存分布 内存管理方式 new和delete operator new 与 operator delete函数 实现原理 定位new表达式(placement-new) 模板基础 泛型编程 模板 函数模板 类模板 STL 组成部分 内存管理 内存分布 int globalVar 1; //全局变量 静…...
JDK8新特性：Stream
JDK8最大的改变： 1. lambda表达式 2. Stream 1. Steam流的入门 什么是Stream？ 也叫Stream流，是jdk8开始的一套API，用于操作集合或者数组中的数据 优点： Stream流大量结合了Lambda的语法风格来创建，提…...
前端传入Grule，后端保存到 .grl 文件中
前端传入Grule，后端保存到 .grl 文件中 通过简单的输入框，将Grule的部分拆解成 规则名称 规则描述 规则优先级 规则条件 规则逻辑Grule关键字 when Then 模拟了 if 判断的条件和逻辑部分 类似于 shell 和 ruby 之类的脚本语言，有 then 关键字…...
探索《Crypto Rumble》 游戏：经济模型篇
《Crypto Rumble》是一款基于 Zypher Network 游戏引擎打造的卡牌 RPG三消品类的 Web3 游戏，通过引人入胜的游戏设计以及轻量化的游戏玩法，《Crypto Rumble》不仅能够为玩家带来引人入胜的沉浸式游戏体验，同时基于 AI Bot 的游戏编辑器&#…...
【CSS in Depth 2 精译_072】第 12 章 CSS 排版与间距概述 + 12.1 间距设置（上）：究竟该用 em 还是 px
当前内容所在位置（可进入专栏查看其他译好的章节内容） 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 ✔️ 12.1.1 使用 em 还是 px ✔️12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 文章目录 第 12 章 排版与间距…...
Elasticsearch对象映射
Spring Data Elasticsearch对象映射是将Java对象（域实体）映射到存储在Elasticsearchs中的JSON表示形式并返回的过程。内部用于此映射的类是MappingElasticsearchConverter。 元模型对象映射 基于元模型的方法使用域类型信息对Elasticsearch进行读写操作…...
Oracle 19c rac 补丁升级，从19.7 to19.22-集群
1. 补丁包概述 数据库环境 角色 数据库 IP地址 数据库版本 主机名 数据库名称 源端 RAC 172.30.21.166/167 19.7 hfcwdb66/hfcwdb67 hfdb 将以下补丁包上传到/soft下 上传到两个节点的soft目录下：p6880880_190000_Linux-x86-64.zip （更新o…...
机器学习--Kaggle的使用
机器学习–Kaggle的使用 打开Kaggle: Your Machine Learning and Data Science Community并点击Sign In登录账号 kaggle中自带了很多的数据集 在点击Datasets之后，单点Notebook，如果有适用的数据集可以单击Copy and Edit复制其Notebook，之后…...
客户服务新突破，天润融通助力电动车企业实现数智化转型
近年来，两轮电动车成为年轻人喜爱的出行新方式，借着这种潮流，许多新兴品牌迅速发展，并跻身行业头部。 但问题也随之而来，由于业务快速发展，各类服务问题也开始增多。 比如天润融通服务的一家头部两轮电动…...
力扣题目 - 2931.购买物品的最大开销
题目 还需要你前往力扣官网查看详细的题目要求 地址 思路 这边需要你去力扣官网详细查看题目看了题目提供的示例 已经有了解法, 先把values转成1维数组,排序之后进行累加即可 代码 var maxSpending function (values) {let list values.flat();list.sort((a, b) > a - …...
智慧化工园区自动化在线监测，建立产业链路数字安全网
智慧化工升级国家政策推动安全风险频发 化工园区作为化工产业的核心集聚地，在全球经济中占据重要地位。为推动行业的高质量发展，国家相继发布了《“十四五”危险化学品安全生产规划方案》、《石化化工行业数字化转型实施指南》和《化工园区安全风险智能化…...
在Docker中运行MySQL的思考：挑战与解决方案
引言 在云计算和容器化技术日益普及的今天，Docker作为一种轻量级的容器化平台，已经成为开发和部署应用的首选工具之一。其提供的便携性、可扩展性和环境一致性对于无状态微服务来说无疑是巨大的福音。然而，并非所有应用都适合在Docker容器中…...
Linux中所有和$有关的操作
prog < file 命令在 Shell 编程中用于 输入重定向，它将文件的内容作为程序的输入。即，程序 prog 会从文件 file 中读取数据，而不是从标准输入（通常是键盘）读取数据。 基本语法： prog < file 解释&…...
github操作学习笔记（杂乱版）
git开源的分布式版本控制系统： 每次修改文件提交后，都会自动创建一个项目版本 查看git版本看有没有安装成功：git --version 把默认编辑器设置成vim：git config --global core.editor "vim" 1、设置昵称和邮箱ÿ…...