javascript4

最新推荐文章于 2022-01-24 19:00:01 发布

是数学系的小孩儿

最新推荐文章于 2022-01-24 19:00:01 发布

阅读量83

点赞数 3

分类专栏：前端学习记录文章标签： javascript html5 html

本文链接：https://blog.csdn.net/qq_51082388/article/details/120659869

版权

前端学习记录专栏收录该内容

31 篇文章 0 订阅

订阅专栏

简易年历

innerHTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/learning2.css">
	
		<script>
		window.onload=function()
		{
			var oDiv=document.getElementById('tab');
			var aLi=oDiv.getElementsByTagName('li')
			var oTxt=oDiv.getElementsByClassName('div')[0];
			for(var i=0;i<aLi.length;i++)
			{
				aLi[i].onmouseover=function()
				{
					for(var i=0;i<aLi.length;i++)
					{
						aLi[i].index=i;
						aLi[i].className='';
					}
					this.className='active';
						oTxt.innerHTML='<h2>'+this.index+'月活动</h2>
						<p>play</p>';
					
				};
			}
			
		};
		</script>
	</head>
	<body>
	<div id="tab" class="calender">
		<ul>
			<li class="active"><h2>1</h2><p>JAN</p></li>
			<li><h2>2</h2><p>FER</p></li>
			<li><h2>3</h2><p>MAR</p></li>
			<li><h2>4</h2><P>APR</P></li>
			<li><h2>5</h2><P>MAY</P></li>
			<li><h2>6</h2><P>JUN</P></li>
			<li><h2>7</h2><P>JUL</P></li>
			<li><h2>8</h2><P>AUG</P></li>
			<li><h2>9</h2><P>SEP</P></li>
			<li><h2>10</h2><P>OCT</P></li>
			<li><h2>11</h2><P>NOV</P></li>
			<li><h2>12</h2><P>DEC</P></li>
			
			
			
			
			</ul>
	</div>
	</body>
</html>

字符串连接

<script>
		window.onload=function()
		{   var arr=[
			'11111111111'
			'22222222222'
			'33333333333'
		];
			var oDiv=document.getElementById('tab');
			var aLi=oDiv.getElementsByTagName('li')
			var oTxt=oDiv.getElementsByClassName('div')[0];
			for(var i=0;i<aLi.length;i++)
			{
				aLi[i].onmouseover=function()
				{
					for(var i=0;i<aLi.length;i++)
					{
						aLi[i].index=i;
						aLi[i].className='';
					}
					this.className='active';
						oTxt.innerHTML='<h2>'+this.index+'月活动</h2>
						<p>'+arr[this.index]'</p>';
					
				};
			}
			
		};
		</script>

ABC+def=ABCdef
'abc'+12+5+'def'=abc125def
前两个先连接
'abc'+（12+5）+'def'=abc17def

在这里插入图片描述

this

style行间

JavaScript基础

在这里插入图片描述

ECMAscript：翻译。0 1。核心，解释器。

Document Object Model

操控HTML的能力

BOM,browser object model

浏览器操作

兼容性

ecma几乎没有兼容性问题

DOM 有一些兼容问题
BOM 完全不兼容（一般不用）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>20211008</title>
		<script>
		var a=12;
		alert(typeof a);
		</script>
	</head>
	<body>
		
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>20211008</title>
		<script>
	a='abcd'
		alert(typeof a);
		</script>
	</head>
	<body>
		
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>20211008</title>
		<script>
	a='abcd'
		//alert(typeof a);//
		a=true;
		alert(typeof a)
		</script>
	</head>
	<body>
		
	</body>
</html>

在这里插入图片描述
function
document=object
undefined

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>20211008</title>
		<script>
	window.onload=function()
	{
		var oTxt1=document.getElementById('txt1')
			var oTxt2=document.getElementById('txt2')
				var oBtn=document.getElementById('btn1')
				oBtn.onclick=function()
				{
					alert(oTxt1.value+oTxt2.value);
				};
	};
		</script>
	</head>
	<body>
		<input id="txt1" type="text">
		<input id="txt2"type="text">
		<input id="btn1" type="button" value="求和">
	</body>
</html>

在这里插入图片描述

isNaN检测是不是数字

在这里插入图片描述

类型转换

parseInt()
碰到非数字就停止，
NaN NOT A NUMBER
非数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>20211008</title>
		<script>
	window.onload=function()
	{
		var oTxt1=document.getElementById('txt1')
			var oTxt2=document.getElementById('txt2')
				var oBtn=document.getElementById('btn1')
				oBtn.onclick=function()
				{
					alert(parseInt(oTxt1.value)+parseInt(oTxt2.value));
				};
	};
		</script>
	</head>
	<body>
		<input id="txt1" type="text">
		<input id="txt2"type="text">
		<input id="btn1" type="button" value="求和">
	</body>
</html>

在这里插入图片描述

是数学系的小孩儿

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript4

简易年历innerHTML<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/learning2.css"> <script> window.onload=function() { var oDiv=document.g
复制链接

扫一扫