JavaScript 第二天

最新推荐文章于 2024-10-02 10:53:34 发布
最新推荐文章于 2024-10-02 10:53:34 发布
阅读量212 收藏
点赞数
文章标签： JavaScript python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Stephen_zsky/article/details/80207387
版权

1. 数组生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//不常用
		//var arr = new Array(1,2,'哈哈');
		//1.数组的定义
		var arr = [1,2,'哈哈'];
		
//		alert(arr);  //弹出1，2，哈哈
//		//2.按下标取元素
//		alert(arr[0]);  //弹出1
//		
		
		//3.获取数组长度=个数 = 3
//		alert(arr.length);  //弹出3
		
		//4.把数组转化为字符串。通过什么符号去分割。
//		alert(arr.join(''));  //弹出12哈哈
//		alert(arr.join('-')); //弹出1-2-哈哈

//		//5.push在数组最后追加一个数据
//		arr.push('呵呵');
//		alert(arr);  //弹出1，2，哈哈，呵呵
		
//		//6.pop删除数组的最后一个数据
//		arr.pop();
//		alert(arr); //弹出1,2 
		
		//7.数组反转
//		alert(arr.reverse());  //弹出哈哈，2,1
		
		//8.indexOf查找数组数据的下标。如果找不到则返回-1。
//		alert(arr.indexOf(1));  //弹出0
//		alert(arr.indexOf(3));  //弹出-1
		
		
		var arr2 = [1,2,3,4,5];
//		//从第二个元素开始，删除3个元素，然后在此位置增加3,4
//		arr2.splice(2,3,3,4);   //数组是可变类型
//		alert(arr2);  //弹出1,2,3,4
		
//		//从第一个元素开始，删除0个元素，在此位置再增加'这是我想要添加的'
//		//实际上就是可以在任意位置插入想要增加的元素
//		arr2.splice(1,0,'这是我想要添加的');
//		alert(arr2);   //弹出1，这是我想要添加的，2,3,4,5


		//多维数组。数组嵌套数组
		var arr3= [[1,2,3],[4,5,6]];
		alert(arr3);  //弹出1,2,3,4,5,6,
		alert(arr3[0][1]);  //弹出2
	</script>
</html>

2.  循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//for(初始值;循环的次数;递增){
//			
//		}

		for(var i = 0;i <3;i++){
			alert(i);
		}
	</script>
</html>

3. 数组去重

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var list = [3,4,3,4,5,5];
		var list2 =[];
		
//		第一次执行:3的下标是0和2，但是indexOf只会取到第一个3的下标0,
//      刚好对应是i(0)，执行加入到list2
//		第三次执行:3的下标又会取到第一个3的下标0,二对应的是i(2)，
//      不匹配因此不加入到list2中，以此排除类推
		for(i = 0; i < list.length; i++){
			if(list.indexOf(list[i]) == i){
				list2.push(list[i]);
			}
		}
		alert(list2);
		
	</script>
</html>

4. 案例 - 将数组内容打印到列表

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul {
				width: 300px;
				height: 300px;
				background: lightblue;
				font-size: 40px;
			}
			
			a {
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<ul id="box">

		</ul>
	</body>
	<script type="text/javascript">
		//定义数组  将列表内容装入数组
		var list = ['复仇者联盟', '后来', '头号玩家', '海绵宝宝'];
		//获取列表元素
		var oBox = document.getElementById('box');


		//循环添加
		for(var i = 0; i < list.length; i++) {
			oBox.innerHTML += '<li><a href="http://www.baidu.com">' + list[i] + '</a></li>'
		}
	</script>

</html>

5.  调试程序的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		for(var i=0; i<100; i++){
			
			//通常我们用这种这种方法能看到效果进行调试
			//但是如果像本程序中循环次数过多的话，alert直接看结果会造成很大的困扰
//			alert(i);

			//推荐使用console.log()来进行查看和调试
			console.log(i)
		}
	</script>
</html>

6.  字符串的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var num1 = '12.98';
		var num2 = 13;
		var num3 = 12;
		
//		//1、字符串合并操作：“ + ”
//      //数字和字符串相加等同于字符串相加
//		alert(num1+num2);  //弹出12.9813
//		alert(num2 + num3);  //弹出25
//		alert(num1 + num2 + num3);  //弹出12.981312
//		alert(num2 + num3 + num1);  //弹出2512.98


//		//2、parseInt() 将 数字字符串 转化为整数
//		parseInt取整。不会四舍五入。可以转为数值
//		alert(parseInt(num1));   //弹出12
//		alert(parseInt(num1) + num2);  //弹出25


//		//3、parseFloat() 将 数字字符串 转化为小数
//		//parseFloat转为小数。可以转为数值
//		alert(parseFloat(num1) + num2);  //弹出25.98



//		//4、减号，自带会把数据类型转成数值
//		alert( num1-0 );   //是parseInt、parseFloat之外简单的将 数字字符串 转化为数字类型的方法
//		alert(num1 + num2);  //弹出12.9813
//		alert(num1-0 + num2);  //弹出25.98
		

//		//5、split() 把一个字符串分隔成字符串组成的数组
//		var sTr = '2018-5-4';
//		var arr1 = sTr.split("-");  //['2018','5','4']
//		var arr2= sTr.split("");	//['2','0','1','8','-','5','-','4']
//		
//		alert(arr1);  //弹出2018,5,4
//		alert(arr2);  //弹出2,0,1,8,-,5,-,4


//		//6、indexOf() 查找字符串是否含有某字符
//		//找出元素的下标。如果找不到就返回-1
//		alert(num1.indexOf('.'));  //弹出2
//		alert(num1.indexOf('a'));  //弹出-1
		
		
		//7、substring() 截取字符串 用法： substring(start,end)（不包括end）
		//第一个值代表开始，第二值代表是结束
		//假如直接一个值，只有开始，没有结束
		var num4 = '13.3333333344444555555';
		alert(num4.substring(2,5));   //弹出.33
		alert(num4.substring(2));  //弹出.3333333344444555555
	</script>
</html>

7. 字符串的反转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var sTr = '123abcdef';
		
		//先把字符串转成数组。再反转。再转为字符串
		//字符串没有反转操作
		alert(sTr.split('').reverse().join(''));  //弹出fedcba321
	</script>
</html>

8. 变量的作用域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/*
		 变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。

		1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
		2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
		 */
		
		var num1 = 123;   //全局变量
		
		function fnAlert(){
			
			var num2 =321;  //局部变量
			
			alert(num1);
			alert(num2);
		}
		
		fnAlert();   //第一次弹出123 & 第二次弹出321 
		alert(num1);   //弹出123
		alert(num2);   //不能弹出，错误
	</script>
</html>

9. 定时器基础

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="开启多次定时器" id="btn1"/>
		<input type="button" value="开启单次定时器" id="btn2"/>
		<input type="button" value="关闭多次定时器" id="btn3"/>
		<input type="button" value="关闭多次定时器" id="btn4"/>
	</body>
	<script type="text/javascript">
		var oBtn1 = document.getElementById('btn1');
		var oBtn2 = document.getElementById('btn2');
		var oBtn3 = document.getElementById('btn3');
		var oBtn4 = document.getElementById('btn4');
		var mUl = null;
		var sIng = null;
		
		//多次定时器
		oBtn1.onclick = function(){
			mUl = setInterval(function(){
				alert('炸了');
			},3000)
		}
		
		//单次定时器
		oBtn2.onclick = function(){
			sIng = setTimeout(function(){
				alert('炸了');
			},3000)
		}
		
		//关闭多次定时器
		oBtn3.onclick = function(){
			clearInterval(mUl);
		}
		
		//关闭单次定时器
		oBtn4.onclick = function(){
			clearTimeout(sIng);
		}
	</script>
</html>

10. 倒数计时案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1 id="box">
			3
		</h1>
	</body>
	<script type="text/javascript">
		var oBox = document.getElementById('box');
		
		var num = 10;
	
		setInterval(function(){
			if(num ==0){
				oBox.innerHTML = '嗨，您的计时已经结束了！';
				return ;
			}
			num--;
			oBox.innerHTML = num;
		},1000)
		
	</script>
</html>

11. 跑步动画

图片资源：a.jpg

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				/*设置背景颜色和照片背景颜色一致*/
				background: #c7c7c7;
			}
			
			img {
				width: 250px;
				position: absolute;
				left: 0;
				top: 200px;
			}
		</style>
	</head>

	<body>
		<input type="button" value="走你" id="btn1" />
		<input type="button" value="停下" id="btn2" />
		<img src="a.jpg" id="pic" />
	</body>
	<script type="text/javascript">
		//获取元素
		var oBtn1 = document.getElementById('btn1');
		var oBtn2 = document.getElementById('btn2');
		var oPic = document.getElementById('pic');
		//定义两个变量  留待后续用
		var start = null;
		var num = 0;
		
		
		//定时器毫秒问题，不要低于80.
		//点击事件
		oBtn1.onclick = function() {
			//先清除定时器，再执行定时器。避免效果叠加
			//可以尝试注释此行，重复点击'走你'按钮，查看效果
			clearInterval(start);
			//设置定时器
			start = setInterval(function() {
				//判断限定移动的像素
				if(num <= 1000){
					num += 5;
					oPic.style.left = num + 'px';
				}
			}, 80)
		}
		
		//关闭定时器
		oBtn2.onclick = function() {
			clearInterval(start);
		}
	</script>

</html>

12. 案例 - 获取当前时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body id='body'>
	</body>
	<script type="text/javascript">
		
		setInterval(function(){
			
			var date = new Date();  //new Date() 获取当前所有的时间
			var year = date.getFullYear();  //获取年
			var month = date.getMonth() + 1;  //获取月.月份要加1
			var day = date.getDate();  //获取日
			var hours = date.getHours();  //获取时
			var minutes = date.getMinutes();  //获取分
			var second = date.getSeconds();  //获取秒
			var week = date.getDay();  //获取周
			var oBody = document.getElementById('body');
			
			//拼接HTML内容
			oBody.innerHTML = '<h1>'+year+'年'+month+'月'+day+'日'+hours+'时'+minutes+'分'+second+'秒周'+week+ '</h1>';
		})
		
	</script>
</html>

13. 封闭函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		
		function aa(){
			alert('我是封闭外面的函数')
		}
		aa();
		
		//封闭函数语法  (function(){ })()
		//封闭函数：不会影响别人，别人也影响不到我
		//项目中由多人合作时，可以用到封闭函数，防止函数、变量的重名
		(function(){
			function aa(){
				alert('我是封闭里面的函数')
			}
			aa();
		})()
	</script>
</html>

Stephen_zsky
关注
100天精通鸿蒙从入门到跳槽——第2天：探究 ArkTS、TypeScript 和 JavaScript 之间的关系
猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！
01-17 6万+
本文会深入探讨ArkTSTypeScript和JavaScript之间的关系。我们首先了解了TypeScript是如何扩展JavaScript的，以及它为开发带来的优势。然后，我们将注意力转向 ArkTS，它是在TypeScript的基础上构建的，专门为开发跨端应用而设计。通过深入了解这三种技术，读者将在100天内掌握HarmonyOS的强大功能，实现在新技术领域的快速成长。本文通过分析ArkTS、TypeScript和JavaScript之间的关系，揭示了它们在HarmonyOS编程领域中的重要作用。
JavaScript基础练习题（三）
qqatt的博客
02-06 2万+
一、单选题（共30题，每题2分） 得分：2.0分 1. 以下关于Javascript中事件的描述中，不正确的是 A click——鼠标单击事件 B focus——获取焦点事件 C mouseover——鼠标指针移动到事件源对象上时触发的事件 D change——选择字段时触发的事件 正确答案: D 解析: change事件为input内容发生改变时触发的事件。 根据input的type属性值不同，...
javascript入门第二天
caozhisanguo的专栏
01-10 5338
typora-copy-images-to: img 今日内容 事件 综合案例：动态添加表格 常见的内置对象 BOM对象 javascript面向对象 综合案例：随机抽奖（抽人名），开光灯案例，轮播图案例 一.事件机制 1.常见的名词解释 事件 在网页里面的事件，指的触发网页的动作，比如：点击鼠标，双击鼠标，按键盘，那么这些动作称之为事件。 比如：脚踹电动车 事件源 在网页里面的事件源，指的网页的元素，比如：标签，属性，文本等等，这些称之为事件源 比如：电动车 监听 在网页里面的监听，指.
javascript 入门第一天
热门推荐
caozhisanguo的专栏
01-10 2万+
javascript 入门第一天
JavaScript第五天作业案例
qq_41943654的博客
04-02 2530
JavaScript第五天作业案例 1. 练习1: 使用for循环 - 求出数组元素的和 [5, 8, 9, 2, 1, 5] 运行结果 2. 练习2: 使用for循环 - 求出数组里大于5的和 [4, 9, 5, 20, 3, 11] 运行结果 练习3: 使用for循环 - 求出班级里同学们平均年龄[15, 19, 21, 33, 18, 24] 运行结果 练习4: 打印数组里所有的奇数 [5, 2, 8, 10, 3, 7] 运行结果 练习5: 计算[2, 6, 18, 15, 40]
js 判断是否为第二天
小哈的博客
05-26 3690
js 判断是否为第二天 以uni-app为例 首先我们要获取第二天0点的时间戳，存储到本地缓存中 然后我们进入app的时候判断当前的时间戳是否 >= 上回记录的时间戳，如果大于，那么就是第二天了 methods:{ //获取第二天0点的时间戳 twoDay(){ let timeObj = {} let date = new Date(); let year = date.getFullYear(); let mon
JavaScript 基础笔记（pink老师）--第二天
RockyBlogs
02-05 2157
JavaScript 基础笔记 对应pink老师的课程
每日作业-JavaScript第01天
qq_62089165的博客
07-27 3005
每日JavaScript作业练习。
JavaScript学习（第一天）
ingenuou_的博客
08-17 1384
JavaScript学习（第一天）
JavaScript基础 —— 学习 第一天
qq_63342197的博客
03-14 1173
主要学习 JavaScript 中 JavaScript 基本介绍、书写位置、语法、代码执行顺序、字面量、变量、数组、常量、数据类型等方面的知识。
JavaScript笔记 第二天
07-04
JavaScript是Web开发中不可或缺的一部分，尤其在前端...以上是JavaScript第二天课程的主要知识点，理解并熟练掌握这些内容是成为合格前端开发者的基础。通过不断练习和项目实践，可以逐步提升JavaScript的运用能力。
小白学JavaScript的第二天
09-19
个人笔记
第二天JavaScript笔记总结
07-19
第二天JavaScript笔记总结
JavaScript高阶第二天.xmind
08-11
JavaScript高阶笔记总结： 目前学到的this指向： 1.普通函数的this指向 window 2.构造函数this指向实例化对象 3.事件中的this指向事件源 4.定时器中的this指向window 5.立即执行函数中的this指向window 6.对象...
小白学JavaScript的第十二天
09-30
小白学JavaScript的第十二天
（笔记）第三期书生·浦语大模型实战营（十一卷王场）--书生入门岛通关第2关Python 基础知识
最新发布
haidizym的博客
10-02 466
学员闯关手册：https://aicarrier.feishu.cn/wiki/ZcgkwqteZi9s4ZkYr0Gcayg1n1g?课程视频：https://www.bilibili.com/video/BV1mS421X7h4/课程文档：https://github.com/InternLM/Tutorial/tree/camp3/docs/L0/Python。
遥感影像-实例分割数据集：iSAID 从切图到YOLO格式数据集制作详细介绍
GIS潮流
09-30 1149
开源数据集isaid标注包含实例分割，但是原始影像太大，很吃显存，一般显卡无法用原始影像直接训练，所以需要对影像进行裁剪，并生成对应的标签，因为想用yolo系列跑模型，所以将标签需要转为txt格式。
酷炫音乐盒: 使用Python和Tkinter配合Pygame打造自己的音乐播放器
宇宙第一小趴菜的博客
09-29 1225
Tkinter是一个功能强大且简单易用的库，适合构建轻量级的GUI应用程序。它在不同的操作系统上具有相同的外观和行为，因此可以实现跨平台的应用程序。当然，Tkinter还有更多的功能和细节，通过阅读官方文档和教程，你可以更深入地了解和学习如何运用Tkinter来创建各种GUI应用程序。
Python | Leetcode Python题解之第448题找到所有数组中消失的数字
Mopes__的博客
10-01 402
Python | Leetcode Python题解之第448题找到所有数组中消失的数字
码农第二期：JavaScript框架对决与极客精神探索
在这期"码农 第二期"中，主要涵盖了与JavaScript相关的专题内容，以及对知名编程人士的访谈和行业见解。以下是详细的解释： 1. JavaScript专题： - 七大框架论剑：讨论了当时（2012年）JavaScript领域中的七个主流...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值