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.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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是数学系的小孩儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值