js常见案例总结（一）
2024-04-27 23:21:19
目录
1.变量的交换
2.九九乘法表
3.格式化时间和日期
4.排他功能
5.点击按钮显示和隐藏div
6.网页开关灯
7.列表隔行变色
8.列表的高亮显示
9.导航栏首页
1.变量的交换：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>变量的交换</title></head><body><script type="text/javascript">//变量交换的第一个思路：使用第三方的变量进行交换var num1 = 10;var num2 = 20;var temp = num1;num1 = num2;num2 = temp;console.log(num1,num2);//20 10//第二种方式交换:一般用于数字的交换var num1 = 10;var num2 = 20;num1 = num1 + num2;num2 = num1 - num2;num1 = num1 - num2;console.log(num1,num2);//20 10//扩展的变量的交换：位运算var num1 = 10;var num2 = 20;num1 = num1^num2;num2 = num1^num2;num1 = num1^num2;console.log(num1,num2);//20 10</script></body>
</html>2.九九乘法表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>九九乘法表</title></head><body></body><script type="text/javascript">// 方法一://控制行数for(var i=1;i<=9;i++){//控制每一行有多少个表达式for(var j=1;j<=i;j++){document.write(j+"*"+i+"="+i*j);};document.write("<br />");};//方法一:表格版document.write("<table border='1' cellspacing='0' cellpadding='2px'>");for(var i=1;i<=9;i++){document.write("<tr>");for(var j=1;j<=i;j++){document.write("<td>");document.write(j+"*"+i+"="+i*j);document.write("</td>");};document.write("</tr>");};document.write("</table>");</script>
</html>
3.格式化时间和日期
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>格式化日期和时间</title>
</head>
<body>
</body>
<script type="text/javascript">function getDate(date) {//获取年份var year = date.getFullYear();//获取月份var month = date.getMonth() + 1;//获取日期var day = date.getDate();//获取小时var hour = date.getHours();//获取分钟var minute = date.getMinutes();//获取秒var second = date.getSeconds();month = month < 10 ? "0" + month : month;day = day < 10 ? "0" + day : day;hour = hour < 10 ? "0" + hour : hour;minute = minute < 10 ? "0" + minute : minute;second = second < 10 ? "0" + second : second;return year + "年" + month + "月" + day + "日" + hour + "：" + minute + ":" + second;};console.log(getDate(new Date()));
</script>
</html>
4.排他功能
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例排他功能</title></head><body><input type="button" value="没有" /><input type="button" value="没有" /><input type="button" value="没有" /><input type="button" value="没有" /><input type="button" value="没有" /></body><script type="text/javascript">//获取所有的按钮,分别注册点击事件var btns = document.getElementsByTagName("input");//循环遍历所有的按钮for (var i = 0; i < btns.length; i++) {//为每个按钮都要注册点击事件btns[i].onclick = function() {//把所有的按钮的value值设置为默认的值:没有for (var j = 0; j < btns.length; j++) {btns[j].value = "没有";};//当前被点击的按钮设置为:有this.value = "有";};};
</script>
</html>
5.点击按钮显示和隐藏div
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例点击按钮显示和隐藏div</title><style type="text/css">#div {width: 300px;height: 200px;background-color: #008B8B;}</style></head><body><input type="button" value="隐藏" id="btn" /><div id="div"></body><script type="text/javascript">//根据id获取按钮，注册点击事件，添加事件处理函数document.getElementById("btn").onclick = function() {if (this.value == "隐藏") {document.getElementById("div").style.display = "none";this.value = "显示";} else if (this.value == "显示") {document.getElementById("div").style.display = "block";this.value = "隐藏";};};
</script>
</html>
6.网页开关灯
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例网页开关灯</title><style type="text/css">.cls {background-color: black;}</style></head><body id="bd"><input type="button" id="btn" value="开/关灯" /></body><script type="text/javascript">document.getElementById("btn").onclick = function() {//获取body标签document.body.className = document.body.className != "cls" ? "cls" : "";</script>
</html>
7.列表隔行变色
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例列表隔行变色</title></head><body><input type="button" name="" id="btn" value="隔行变色" /><ul id="uu"><li>红旗</li><li>五菱宏光</li><li>奔驰</li><li>兰博基尼</li><li>哈弗</li><li>奥拓</li><li>悍马</li></ul></body><script type="text/javascript">//奇数红色，偶数黄色document.getElementById("btn").onclick = function() {var lists = my$("uu").getElementsByTagName("li");for (var i = 0; i < lists.length; i++) {if (i % 2 == 0) {lists[i].style.backgroundColor = "red";} else {lists[i].style.backgroundColor = "yellow";};};};
</script>
</html>
8.列表的高亮显示
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例列表的高亮显示</title><style type="text/css">ul {list-style: none;cursor: pointer;}</style></head><body><ul><li>金士百</li><li>雪花</li><li>百威</li><li>燕京</li><li>青岛</li><li>崂山</li><li>珠江</li><li>华丹</li></ul></body><script type="text/javascript">//鼠标进入和鼠标离开两个事件var lists = document.getElementsByTagName("li");for (var i = 0; i < lists.length; i++) {//为li注册鼠标进入事件lists[i].onmouseover = function() {this.style.backgroundColor = "green";};//为li注册鼠标离开事件lists[i].onmouseout = function(){//恢复到这个标签默认的颜色this.style.backgroundColor = "";};};
</script>
</html>
9.导航栏首页
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例</title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style-type: none;}.box {width: 400px;height: 300px;border: 1px solid #ccc;margin: 100px auto;overflow: hidden;}.hd {height: 45px;}.hd span {display: inline-block;width: 90px;background-color: pink;line-height: 45px;text-align: center;cursor: pointer;}.hd span.current {background-color: purple;}.bd li {height: 255px;background-color: purple;display: none;}.bd li.current {display: block;}</style></head><body><div class="box" id="box"><div class="hd"><span class="current">体育</span><span>娱乐</span><span>新闻</span><span>综合</span></div><div class="bd"><ul><li class="current">我是体育模块</li><li>我是娱乐模块</li><li>我是新闻模块</li><li>我是综合模块</li></ul></div></div></body><script type="text/javascript">//获取所有的li标签var lis = document.getElementsByClassName("bd")[0].getElementsByTagName("li");//获取所有的span标签var spans = document.getElementsByClassName("hd")[0].getElementsByTagName("span");//循环遍历的方式，添加点击事件for (var i = 0; i < spans.length; i++) {//在点击之前就把索引保存在span标签中spans[i].setAttribute("index", i);spans[i].onclick = function() {//第一件事，所有的span的类样式全部移除for (var j = 0; j < spans.length; j++) {spans[j].removeAttribute("class");};//第二件事，当前被点击的span应用类样式this.className = "current";//被点击的时候获取存储的索引值// alert(this.getAttribute("index"));var index = this.getAttribute("index");//获取所有的li标签，每个li标签先隐藏for(var k=0;k<lis.length;k++){lis[k].removeAttribute("class");};lis[index].className = "current";};};
</script>
</html>
js常见案例总结（一）相关推荐
- jQuery常见案例
jQuery常见案例 通过jQuery实现全选,反选取消: 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> <inpu ...
- js常见的几种页面刷新方法
js常见的几种页面刷新方法如下: 1 history.go(0); 2 location.reload(); 3 location=location; 4 location.assign(locati ...
- Moment.js常见用法总结
From: https://www.jianshu.com/p/9c10543420de Moment.js常见用法总结 Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中 ...
- Moment.js常见用法总结 1
Moment.js常见用法总结 Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率. 日常开发中,通常会对时间进行下面这几个操作:比如获取时 ...
- JS匀速运动案例01
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- linux系统日志排故方案,Linux系统故障排查思路与常见案例
Linux系统故障排查思路与常见案例 1.Linux系统日志与分类 内核及系统日志 这种日志数据由系统服务syslog统一管理,根据其主配置文件"/etc/syslog.conf" ...
- CPU 100%排查及常见案例
CPU 100%排查及常见案例 这篇文章主要分享一般线上项目遇到CPU%时排查的方式,并提供了几个典型案例来帮助大家熟悉排查过程,我会先以 "死循环" 为例子来为大家演示一遍整体的 ...
- JS逆向案例文章推荐
1.JS逆向语法学习分享 2.JS逆向案例 阿J的CSDN 成功你要成仁啊的CSDN mkdir700的CSDN 渔滒的CSDN 咸鱼学python 白白嫩嫩的简书 考古学家的CSDN 太阳花田向日葵 ...
- Python爬虫之Js逆向案例(2)-某乎搜索
Python爬虫之Js逆向案例(2)-知乎搜索 声明:某乎加密逆向分析仅用于研究和学习 大家好,今天继续分享关于某乎关键词搜索接口为案例的Js逆向实战.如果你是一名新手,而且还没有来得及看上一篇< ...
最新文章
- 科技边框_智能手机窄边框喷射点胶机欧力克斯
- 最大值减去最小值小于或等于num的子数组数量
- java空指针避坑指南
- 杜鹃演绎奢华春装大片
- 【朝夕Net社区技术专刊】Core3.1 WebApi集群实战专题---WebApi环境搭建运行发布部署篇...
- CSS学习笔记--CSS语法与选择器
- postgresql分割字符串_postgresql 实现字符串分割字段转列表查询
- 2016NOI冬令营day4
- linux如何安装阵列卡驱动程序,Linux安装阵列卡驱动及档.doc
- 伍德里奇 第6版 计量经济学导论_伍德里奇《计量经济学导论》第6版课后习题答案...
- linux rarcrack破解rar、zip和7z压缩包简单密码的工具
- 基于Websocket的RAT
- LSD_SLAM框架总结[最终版本]
- MarkDown All in One插件预览与常用快捷键
- 互联网日报 | 得到披露招股书；格力集团35亿投资小米；淘宝村年交易额破万亿；2020北京车展开幕...
- mysql 占用cpu高_mysqlCPU占用过高解决方案
- 计算机软件和应用审稿可以加急吗,计算机类期刊审稿周期
- 锂电池剩余寿命预测(简单介绍)
- 树莓派超级水冷主机！！！
- Centos 7下 ceph的安装