js数组 复选框全选 js跳转

 function addUser() {
  window.self.location ="userinput.jsp";
 }
 

//js数组的使用
  function deleteUser(){
      var flag = false;
      var selectFlags = document.getElementsByName("selectFlag");
     
      for(var i=0;i<selectFlags.length;i++){
          if(selectFlags[i].checked){
              flag = true;
              break;
          }
      }
      if(!flag){
          alert("请选择要删除的条目!");
      }else{
          if(window.confirm("确认要删除")){
              with(document.getElementById("userForm")){
                  method="post";
                  action="deluser.do";
                  submit();
              }

          }
      }
 }
 

//复选框全选
  function selectAll(){
      if(document.getElementById("selectall").checked){
          for(var i=0;i<document.getElementsByName ("selectFlag").length;i++){
              document.getElementsByName("selectFlag")[i].checked = true;
          }
      }else{
          for(var i=0;i<document.getElementsByName("selectFlag").length;i++){
                  document.getElementsByName("selectFlag")[i].checked = false;
              }
      }
  }

源码来自:https://pan.quark.cn/s/fdd21a41d74f 正方教务管理系统成绩推送 简介 使用本项目前: 早晨睡醒看一遍教务系统、上厕所看一遍教务系统、刷牙看一遍教务系统、洗脸看一遍教务系统、吃早餐看一遍教务系统、吃午饭看一遍教务系统、睡午觉前看一遍教务系统、午觉醒来看一遍教务系统、出门前看一遍教务系统、吃晚饭看一遍教务系统、洗澡看一遍教务系统、睡觉之前看一遍教务系统 使用本项目后: 成绩更新后自动发通知到微信 以节省您宝贵的时间 测试环境 正方教务管理系统 版本 V8.0、V9.0 如果你的教务系统页面与下图所示的页面完全一致或几乎一致,则代表你可以使用本项目。 目前支持的功能 主要功能 每隔 30 分钟自动检测一次成绩是否有更新,若有更新,将通过微信推送及时通知用户。 相较于教务系统增加了哪些功能? 显示成绩提交时间,即成绩何时被录入教务系统。 显示成绩提交人姓名,即成绩由谁录入进教务系统。 成绩信息按时间降序排序,确保最新的成绩始终在最上方,提升用户查阅效率。 计算 计算百分制 对于没有分数仅有级别的成绩,例如”及格、良好、优秀“,可以强制显示数字分数。 显示未公布成绩的课程,即已选课但尚未出成绩的课程。 使用方法 Fork 本仓库 → 开启 工作流读写权限 → → → → → 添加 Secrets → → → → → → Name = Name,Secret = 例子 程序会自动填充 尾部的 ,因此你无需重复添加 对于部分教务系统,可能需要在 中添加 路径,如: 开启 Actions → → → 运行 程序 → → 若你的程序正常运行且未报错,那么在此之后,程序将会每隔 30 分钟自动检测一次成绩是否有更新 若你看不懂上述使用...
帮我设计一个适合初学者简单的“精美家居中小企业网 ”页面共有五个页面构成,分别是:首页、关于我们、 联系我们、在线留言、登录注册。共计十个功能。 产品展示页面 产品展示页面中包含两个功能:图片放大功能和倒计时功能。 图片放大设计与分析 产品展示页面中在设计两个盒子模型。其中在 box_right盒子中存放展示图 片,在 big.img 盒子用于存放放大照片。先将大盒子隐藏,通过 document 方法 获取 img 节点,绑定鼠标单击事件。将 box_right 盒子中的 src 的值传递给 big.img 盒子。并将盒子属性显示出来。 倒计时设计与分析 倒计时功能的核心在于定时器的应用,首先利用 Date 对象中的 getTime 方法 获取到当前时间至截止时间的时间,单位为毫秒。再通过算法 second/86400 得 到天数、second%86400 、second/3600 得到小时数、second%3600 、second/60 得 到秒数。在通过 setinterval()方法实现每秒都进行算法以及当时间为 0 时停止算 法。 2.2 关于我们页面 关于我们页面中共有图片定时变换功能及定时跳转功能,并且跳转页面利用 使用 ECharts 库实现。 2.2.1 图片定时转换分析与设计 首先将图片的 src 的值当作 arr 数组中的元素。利用 doucment 获取 img 节 点。最后 img.src = arr[n];便可实现赋值。用 setInterval(time,2000);实现 定时跳转。当 n 的值大于数组下标时将 n 再次赋值为 0。 定时跳转页面 countDown 函 数 中 的 参 数 secs 和 url 分 别 为 指 定 跳 转 时 间 和地 址 。 jumpTo.innerHTML=secs;将下一秒的数字写入并展示。当 sces 大于零时继续执 行定时器功能。当 sces 小于 0 时停止定时器。跳转指定页面。在本次跳转页面 为 ECharts 库实现的页面。 3.1 联系我们页面 联系我们页面主要实现两个功能;选择所有复选框和文本域中字符数功能。 3.1.1 选择所有复选框设计和核心代码 【功能设计】 将选择复选框功能放在了盒子模型right f1 中,用 document 分 别获取全选框对象 chooseAllElt 和所有复选框对象 hobby s,然后当点击全选框 时 for 循环用 checked 把 hobby s 选上。然后用双层 for 循环和 flag 控制全选框 选择,实现所有复选框选中后,全选框被选择。 3.1.2 文本域中字符数设计和核心代码 【功能设计】将文本域中字符数功能放在盒子 tip 中,用 focus 将焦点自动放在 文本域 textArea 中,然后通过函数 chackTextara 实现自动统计字符数的效果, 在函数中用newvalue 过滤一些特殊字符,用 if-else 语句来判断输入字符数, 提示还可以输入多少字符,或者已超出多少字符。 3.2 登录/注册页面 登录/注册页面主要实现两个功能:鼠标点击效果和表单前端验证 3.2.1 鼠标点击效果设计和核心代码 【功能设计】在登录页面实现鼠标点击飘浮文字效果,通过函数ClickFrontShow 定义点击出现的文字类 ,也就是定义漂浮的文字内容和颜色; 然后再给 ClickFrontShow 定义初始化;再通过函数 createFront 创建文字,也就是给字 体添加样式,和随机颜色等;然后通过函数 listenMouse 监听鼠标点击,实现所 需飘符的效果。 要求css要引用第三方库bootstrap.min.css 要求显示五个页面的代码和css代码和js样式代码,代码中不用太过ai化 并且一个一个功能清楚的分析,标注在那个位置实现那个功能
06-19
### 精美家居中小企业网站设计与实现 以下为一个初学者友好的精美家居中小企业网站设计方案,包含五个页面(首页、关于我们、联系我们、在线留言、登录注册)以及十个功能的具体实现代码和分析。整个网站使用HTML、CSS、JavaScript,并结合Bootstrap库进行样式设计。 --- #### 文件结构 为了保持清晰的文件组织,建议按照以下方式设计: ```plaintext project/ │ ├── index.html # 首页 ├── about.html # 关于我们页面 ├── contact.html # 联系我们页面 ├── message.html # 在线留言页面 ├── login.html # 登录注册页面 │ ├── css/ # 样式文件夹 │ └── styles.css # 自定义样式 │ ├── js/ # JavaScript文件夹 │ ├── main.js # 主逻辑脚本 │ ├── formValidation.js # 表单验证脚本 │ ├── echartsConfig.js # ECharts配置脚本 │ └── swiperInit.js # Swiper轮播图初始化脚本 │ ├── assets/ # 资源文件夹 │ ├── images/ # 图片资源 │ └── fonts/ # 字体资源 │ └── libraries/ # 第三方库 ├── bootstrap.min.css ├── bootstrap.bundle.min.js ├── echarts.min.js ├── swiper-bundle.min.js └── swiper-bundle.min.css ``` --- #### 功能实现与代码示例 ##### (1) 首页 - Swiper轮播图 首页通过Swiper库实现动态图片切换效果。 ```html <!-- index.html --> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="assets/images/product1.jpg" alt="Product 1"></div> <div class="swiper-slide"><img src="assets/images/product2.jpg" alt="Product 2"></div> <div class="swiper-slide"><img src="assets/images/product3.jpg" alt="Product 3"></div> </div> <div class="swiper-pagination"></div> </div> <script src="libraries/swiper-bundle.min.js"></script> <script src="js/swiperInit.js"></script> ``` ```javascript // js/swiperInit.js var swiper = new Swiper(".mySwiper", { pagination: { el: ".swiper-pagination", clickable: true, }, }); ``` **分析**:通过Swiper库实现图片轮播功能,增强用户体验[^1]。 --- ##### (2) 表单验证 - 在线留言页面 在线留言页面需要对用户输入进行表单验证。 ```html <!-- message.html --> <form id="messageForm"> <input type="text" id="name" placeholder="姓名" required> <input type="email" id="email" placeholder="邮箱" required> <textarea id="message" placeholder="留言内容" required></textarea> <button type="submit">提交</button> </form> <script src="js/formValidation.js"></script> ``` ```javascript // js/formValidation.js document.getElementById('messageForm').addEventListener('submit', function(event) { event.preventDefault(); const name = document.getElementById('name').value.trim(); const email = document.getElementById('email').value.trim(); const message = document.getElementById('message').value.trim(); if (!name || !email || !message) { alert("请填写所有必填项!"); return; } if (!validateEmail(email)) { alert("请输入有效的邮箱地址!"); return; } alert("提交成功!"); }); function validateEmail(email) { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(email); } ``` **分析**:通过表单验证确保用户输入符合要求,减少无效数据提交[^2]。 --- ##### (3) DOM操作 - 动态添加产品列表 在首页动态加载家居产品列表。 ```html <!-- index.html --> <ul id="productList"></ul> ``` ```javascript // js/main.js window.onload = function() { const productList = [ { id: 1, name: "沙发", price: "¥2000" }, { id: 2, name: "餐桌", price: "¥1500" }, { id: 3, name: "床", price: "¥3000" } ]; const ul = document.getElementById('productList'); productList.forEach(item => { const li = document.createElement('li'); li.innerHTML = `<strong>${item.name}</strong>: ${item.price}`; ul.appendChild(li); }); }; ``` **分析**:通过DOM操作动态生成内容,提高页面灵活性和可维护性[^3]。 --- ##### (4) BOM调用 - 获取地理位置 在联系我们页面获取用户的地理位置。 ```html <!-- contact.html --> <button onclick="getLocation()">获取位置</button> <p id="location"></p> ``` ```javascript // js/main.js function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { const locationElement = document.getElementById('location'); locationElement.textContent = `纬度: ${position.coords.latitude}, 经度: ${position.coords.longitude}`; }); } else { alert("浏览器不支持地理定位!"); } } ``` **分析**:利用浏览器内置API获取地理位置信息,提供个性化服务[^4]。 --- ##### (5) ECharts数据可视化 - 销售统计图表 在关于我们页面展示销售统计数据。 ```html <!-- about.html --> <div id="salesChart" style="width: 600px; height: 400px;"></div> <script src="libraries/echarts.min.js"></script> <script src="js/echartsConfig.js"></script> ``` ```javascript // js/echartsConfig.js const salesData = [120, 200, 150, 80, 70]; const months = ['一月', '二月', '三月', '四月', '五月']; const chart = echarts.init(document.getElementById('salesChart')); chart.setOption({ title: { text: '月销售额统计' }, tooltip: {}, xAxis: { data: months }, yAxis: {}, series: [{ name: '销售额', type: 'bar', data: salesData }] }); ``` **分析**:以图表形式展示数据,直观且易于理解[^5]。 --- ##### (6) Ajax数据获取 - 加载用户评论 在首页通过Ajax加载用户评论。 ```html <!-- index.html --> <div id="comments"></div> <script src="js/main.js"></script> ``` ```javascript // js/main.js function loadComments() { const xhr = new XMLHttpRequest(); xhr.open('GET', 'data/comments.json', true); xhr.onload = function() { if (xhr.status === 200) { const comments = JSON.parse(xhr.responseText); const commentsDiv = document.getElementById('comments'); comments.forEach(comment => { const p = document.createElement('p'); p.textContent = `${comment.author}: ${comment.text}`; commentsDiv.appendChild(p); }); } }; xhr.send(); } loadComments(); ``` **分析**:通过Ajax异步加载数据,提升页面性能和用户体验[^6]。 --- #### 页面布局与样式 以下是统一的页面布局样式: ```html <!-- 公共布局 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="libraries/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.css"> <title>精美家居</title> </head> <body> <!-- 页首 --> <header class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="index.html">精美家居</a> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="index.html">首页</a></li> <li class="nav-item"><a class="nav-link" href="about.html">关于我们</a></li> <li class="nav-item"><a class="nav-link" href="contact.html">联系我们</a></li> <li class="nav-item"><a class="nav-link" href="message.html">在线留言</a></li> <li class="nav-item"><a class="nav-link" href="login.html">登录注册</a></li> </ul> </header> <!-- 内容区 --> <main class="container mt-5"> <!-- 页面具体内容 --> </main> <!-- 页脚 --> <footer class="bg-light text-center py-3"> <p>© 2023 精美家居. All rights reserved.</p> </footer> <script src="libraries/bootstrap.bundle.min.js"></script> <script src="js/main.js"></script> </body> </html> ``` --- ####
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值