前端HTML-js

于 2020-01-17 17:33:23 发布
阅读量206 收藏
点赞数
分类专栏： HTML 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45376958/article/details/104022419
版权
new Date()

在JS中获取当前时间对象和JAVA类似。都是先创建出一个时间对象，用变量进行接收。var myDate= new Date();

  • 获取当前年份
    var myYear=myDate.getFullYear();
  • 获取当前月份,（java和js中）月份是从0开始的,所以要加1
    var myMonth = myDate.getMonth()+1;
  • 获取当前日期
    var date =myDate.getDate();
  • 获取当前是星期几,如果是周日则返回0.
    var myDay=myDate.getDay();
  • 获取当前小时
    var hour =myDate.getHours();
  • 获取当前分钟
    var min =myDate.getMinutes();
  • 获取当前秒
    var sec =myDate.getSeconds();
动态显示时间
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBox =document.getElementById('box');
				var oP=document.getElementById('imgTime');
				
				function runTime(){
					var myDate =new Date();
					var year =myDate.getFullYear();
					var mon =myDate.getMonth()+1;
					var day =myDate.getDate();
					var hour =myDate.getHours();
					var min =myDate.getMinutes();
					var sec =myDate.getSeconds();
					
					var strDate = formatTime(year)+'-'+formatTime(mon)+'-'+formatTime(day)+'    '+formatTime(hour)+':'+formatTime(min)+':'+formatTime(sec);
					
					var strDate1 = formatTime(hour)+':'+formatTime(min)+':'+formatTime(sec);
					oBox.innerHTML = strDate;
					
					for(var i =0;i<strDate1.length;i++){
						var num = strDate1.charAt(i);
						if(i != 2 && i != 5){
							var aImg=oP.getElementsByTagName('img');
							aImg[i].src = 'img/'+num+'.JPG';
						}
					}
				}
				
				runTime();
				var timer = setInterval(function(){
					runTime();
				},1000);
				
				function formatTime(date){
					if(date<10){
						date = '0'+date;
					}
					return date;
				}
				
			}
		</script>
	</head>
	<body>
		<div id="box">
			
		</div>
		<p id="imgTime">
			<img src="img/0.JPG">
			<img src="img/0.JPG">
			<img src="img/colon.JPG" >
			<img src="img/0.JPG">
			<img src="img/0.JPG">	
			<img src="img/colon.JPG" >
			<img src="img/0.JPG">
			<img src="img/0.JPG">
		</p>
	</body>
</html>
日期差的运用

var myDate1 = new Date(2019, 3, 16, 15, 22, 0);
var myDate2 = new Date();
var times = myDate1-myDate2;

  • 日期相减为毫秒（myDate1-myDate2 值为毫秒）
  • 天: Math.floor(times/86400);
  • 时: Math.floor(times%86400/3600);
  • 分: Math.floor(times%86400%3600/60);
  • 秒: Math.floor(times%60);
倒计时
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="datetime">

		</div>
		<script type="text/javascript">
			function djs() {
				var myDate1 = new Date(2019, 3, 16, 15, 22, 0);
				var myDate2 = new Date();
				var times = Math.floor(myDate1 - myDate2) / 1000;

				document.getElementById('datetime').innerHTML = Math.floor(times / 86400) + '天' + Math.floor(times % 86400 / 3600) +
					'时' + Math.floor(times % 86400 % 3600 / 60) + '分' + Math.floor(times % 60) + '秒';
			}
			djs();
			timer = setInterval(function() {
				djs();
			}, 1000);
		</script>
	</body>
</html>
字符串操作
	<script>
          var str = 'A前台技术';
//        alert(str.length);空格占长度
//        alert(str.charAt(2));//找不到的话什么也不显示
//        alert(str.charCodeAt());// 返回unicode码
//        alert(String.fromCharCode(22945)); 返回unicode码代表的字符
//        alert(str.charCodeAt());// 0-9 48-57
//        alert(str.charCodeAt());// a-z 97-122
//        alert(str.charCodeAt());// A-Z 65-90
    </script>

slice和substring都有截取字符串的意思，slice的应用更贴近于java。

  • slice 中参数是一个负数时,从倒数位数截取
  • substring 中参数是一个负数时 ,和0一样

indexOf(v,num)查看字符串v在索引num后出现的位置。如果返回值为-1则说明没有找到该字符串v。
lastIndexOf查看字符串出现的所有位置

split(a): var arrStr=str.split(a)将字符串str按照a拆分成数组。a没了。
arrStr.join();//将数组中的内容用逗号（,）进行拼接
arrStr.join(“”);//将数组中的内容无缝拼接。

展开/收缩文字
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				background: #0F7CBF;
				border: 10px solid red;
				padding: 10px;
				width: 500px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<!-- <span>
				但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
			</span>
			<a href="javascript:;">展开</a> -->
			<span>
				但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
				但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
				但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
				但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
				但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
				但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
				但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
			</span>
			<a href="javascript:;">收缩</a>
		</div>
		<script type="text/javascript">
			var oBox = document.getElementById('box');
			var oSpan = oBox.getElementsByTagName('span')[0];
			var oA = oBox.getElementsByTagName('a')[0];
			
			var text = oSpan.innerHTML;
			var onOff =true;
			oA.onclick = function() {
				if(onOff){
					var html = oSpan.innerHTML.slice(0, 28);
					oSpan.innerHTML = html;
					oA.innerHTML='...展开';
				}else{
					oSpan.innerHTML = text;
					oA.innerHTML='收缩';
				}
				onOff = !onOff;
			}
		</script>
	</body>
</html>
数组

js中数组的长度是可变的，数组中可以存储各种数据类型。
var arr=[1,2,3,4,true,‘hello’];
1.快速清空数组有两种方法。
①arr=[]；
②arr.length=0;
2.向数组中添加数据有两种方法。
①在原数组的末尾添加arr.push(5，6，7);
②在原数组的开始位置添加arr.unshift(‘新数组第一个元素’，‘新数组第二个元素’)。
3.从数组中删除数据有两种方法。
①删除数组中的最后一个元素，产生新数组，并返回最后一个元素的值。arr.pop();
②删除数组中的第一个元素，产生新数组，并返回第一个元素的值。arr.shift();
4.splice可对数组进行增删改
①增加数据：arr.splice(2,0,‘e’);
**解释：**在索引值为2的位置，增加e，其余元素位置后移。
②修改数据：arr.splice(2,3,‘e’);
**解释：**在索引值为2的位置，将从该位置的起的三个元素，替换成e。
③删除数据：arr.splice(1,1)；
**解释：**第一个参数为索引，第二各参数为个数。将索引值为1的元素开始，删除一个元素。

利用splice去重数组中的重复数据
<script type="text/javascript">
          var arr =[1,2,3,4,5,6,2,1,4,5,2];
          //选择排序
          for(var i=0;i<arr.length-1;i++){
                for(var j=i+1;i<arr.length;j++){
                        if(arr[i]==arr[j]){
                              arr.splice(j,1);
                              j--;
                        }
                }
          }
</script>
省市级联动（数组和DOM）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="" id="province">
			<option value="省份" >省份</option>
		</select>
		<select name="" id="city">
			<option value="" >城市</option>
		</select>
		<script type="text/javascript">
			var oPro=document.getElementById('province');
			var oCity=document.getElementById('city');	
			var aPro=['辽宁','河北','湖北'];
			var aCity=[
				['沈阳','大连','鞍山','抚顺','本溪','锦州'],
				['石家庄','天津','廊坊','承德'],
				['武汉','襄阳','宜昌','黄石','十堰']
			];
			for(i in aPro){
				oPro.innerHTML +='<option value="'+aPro[i]+'">'+aPro[i]+'</option>';
			}
			
			// 触发改变事件
			oPro.onchange=function(){
				oCity.innerHTML = '<option value="">城市</option>';
				var provalue= oPro.value;
				for(i in aPro){
					if(aPro[i]==provalue){
						for(j in aCity[i]){
							// 创建一个节点
							var  oPtion =document.createElement('option');
							oPtion.value=aCity[i][j];
							oPtion.innerHTML=aCity[i][j];
							// 追加一个节点
							oCity.appendChild(oPtion);
						}
					}
				}
			}
		</script>
	</body>
</html>

json可以将起看成一个对象，该对象由键值对组成。（不准确）比较像Java中的map集合。

<script type="text/javascript">
			// json 类似map集合,不恰当的说他是一个类似于java的对象
			var json = {
				"name": "张三",
				"age": 16,
				"gender": "男"
			}

			console.log(json['name']);
			console.log(json['age']);
			console.log(json['gender']);

			// 遍历json,attr为key变量
			// json遍历写法类似于java foreach遍历,只不过摆放位置不一样,代表的意义不一样
			for (attr in json) {
				console.log(attr+":"+json[attr]);
			}
</script>
DOM操作（节点操作）（document object model 文档对象模型）

我们可以把每个标签都看作一个节点，标签兄弟标签，父级标签，子标签。即父节点、子节点、兄弟节点等，对他们的操作称为节点操作。
**①获取节点：**获取节点的方式有很多，常用的有通过ID、标签名、类名称、name属性获取。
**通过ID：**document.getElementByID()
**通过标签名：**document.getElementsByTagName()
**通过类名称：**document.getElementsByClassName()
**通过name属性：**document.getElementsByName()
**②获取全部子节点：**返回操作节点的所有子节点数组。
var oList = document.getElementById(‘list’);
var aLi = oList.children；//获取子节点数组
③获取第一个子节点：
var oFlist=oList.firstElementChild;
④获取最后一个子节点：
var oLlist=oList.lastElementChild;
⑤获取某节点的下一个兄弟节点：
var oSlist=oList.firstElementChild.nextElementSibling;(获取第二个子节点：先获取第一个子节点，通过第一个子节点获取他的下一个节点)
⑥获取某节点的上一个兄弟节点：
var oTlist=oList.lastElementChild.previousElementSibling;(获取倒数第二个子节点：先获取倒数第一个子节点，通过倒数第一个子节点获取他的上一个节点)
⑦获取父节点
var oFther=oList.parentNode;
⑧获取有定位的父节点
oList.offsetParent
⑨距离有定位的父节点有多少距离
offsetLeft，offsetTop，offsetRight，offsetBottom

!!!创建节点和追加子节点
var oElement=document.createElement(‘li’);//创建li标签的对象。li标签可以是任意标签div、a等等。
oLi.appendChild(oElement);//将创建的标签插入oLi对象所在标签的子标签中。

取消默认事件和confirm提示框

用Botton举例：创建一个表单，表单中输入内容，如果内容不为空，则跳转到链接地址，否则不跳转。
confirm和alert作用相似，但是会返回true或false。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="https://www.baidu.com" method="" id="form">
			<input type="text" id="" value="" name="username" />
			<button type="submit">提交</button>
			<button type="reset">重置</button>
		</form>
		<script type="text/javascript">
			var oForm = document.getElementById('form');
			var oBtn = oForm.getElementsByTagName('button')[0];

			oForm.onsubmit = function() {
				if (oForm.username.value != null && oForm.username.value != '') {
					oForm.submit();
				} else {
					return false; //取消默认事件
				}
			}

			oForm.onreset = function() {
				if (!confirm("确定重置？")) {
					return false;
				}
			}
		</script>
	</body>
</html>
BOM操作（browser object model 浏览器对象模型）

说白了就是打开、跳转、关闭浏览器窗口

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button1">打开窗口1</button>
		<button type="button2">打开窗口2</button>
		<a href="https://www.baidu.com" target="_blank">打开窗口</a>
		<!-- 
			Bom browser object model 
				关闭窗口
				打开窗口
				跳转页面
		 -->
		 <script type="text/javascript">
		 	document.getElementsByTagName('button')[0].onclick=function(){
				// 打开窗口(挑IE或者其他浏览器的版本，兼容性差)
				window.open("https://www.baidu.com","_self");
			}
			document.getElementsByTagName('button')[1].onclick=function(){
				// 打开窗口(跟上面一样，但是兼容性更好)
				window.location.href="https://www.baidu.com";
			}
		 </script>
	</body>
</html>

焦点事件和焦点函数
获取焦点函数：对象.focus();
获取焦点事件：

对象.onfocus = function() { //焦点事件
				//oInput.value = 'dwa';
			  }

失去焦点函数：对象.blur();
失去焦点事件：

对象.onblur = function() { //焦点事件
				//oInput.value = 'dwa';
			  }
全选函数、计算函数

**全选函数描述：**设置一个按钮和一个文本框，当在文本框中输入文字，点击按钮，使文字变成全部选中状态。
带文本框的对象.select()
**全选函数：**eval能计算可运算的计算表达式的结果
var num =eval(1+2*3/4);

事件的扩展

onmousemove；鼠标移动事件
onmousedown；鼠标按下事件
onmouseup；鼠标弹起事件
onkeydown；//ev.keyCode获取键盘码

document.onkeydown=function(ev){
				var ev =ev||event;
				//ev.keyCode 获取键盘码
				alert(ev.keyCode);
			}
事件流

事件冒泡：所有的事件都具有穿透性,直到穿透到document(子级接收了一个事件，他的父级同样接收这个事件),这种机制叫穿透冒泡.
通过event对象,阻止穿透ev.stopPropagation();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点按钮图片显示，点空白图片消失</title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background: red;
				display: none;
			}
		</style>
	</head>
	<body>
		<p><button type="button">按钮</button></p>
		<div id="box">
			
		</div>
		<script type="text/javascript">
			// 事件冒泡:
		    //   所有的事件都具有穿透性,直到穿透到document(子级接收了一个事件，他的父级同样接收这个事件),这种机制叫穿透冒泡.
			document.getElementsByTagName('button')[0].onclick=function(ev){
				var ev =ev||event;
				document.getElementById('box').style.display='block';
				// 通过event对象,阻止穿透.
				ev.stopPropagation();
			}
			
			
			document.onclick=function(){
				document.getElementById('box').style.display='none';
			}
		</script>
	</body>
</html>

Event对象

当一个对象触发一个事件时，事件function中设置形参event，event对象会返回描述该事件的所有信息。
代码描述：当点击空白窗口时，观察consle控制台输出了什么

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			触发该事件的所有信息都会被记录
		 -->
		<script type="text/javascript">
			document.onclick=function(ev){
				var ev = ev||event;
				for(attr in ev){
					console.log(attr+","+ev[attr])
				}
			}
		</script>
	</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值