JavaScript教程第三篇（作者原创）

JavaScript教程

博客主页：划水的阿瞒的博客主页
欢迎关注🖱点赞🎀收藏⭐留言✒
系列专栏：JavaScript 首发时间：🎞2022年8月5日🎠
如果觉得博主的文章还不错的话，请三连支持一下博主哦

1.JavaScript DHTML概述

1.1DHTML介绍

DHTML的定义
使用JavaScript和CSS级联样式表操作HTML创造出各种动态视觉效果统称为DHTML，DHTML是一种浏览器端的动态网页技术
DHTML的功能
动态改变字体大小和字体颜色
动态设定文档元素的位置、内容，甚至隐藏和显示元素
可以通过事件响应机制制作动态折叠的树形结构和菜单
可以通过定时器制作时钟、日历
可以弹出对话框与用户进行交互
可以通过表单提交用户填写的信息
通过动态样式表可以设定更多的显示效果

1.2DHTML的功能

DHTML对象模型
将HTML标记、属性和CSS样式都对象化
可以动态存取HTML文档中的所有元素
可以使用属性name或id来存取或标记对象
改变元素内容或样式后浏览器中显示效果即时更新
DHTML对象模型包括浏览器对象模型和Document对象模型

2.Window对象

2.1 主要属性

属性案例:
function clickMe(){
alert( window.location );
alert(window.closed);
window.status=“测试窗口”;
alert(“变一变”);
//在JavaScript编程过程中，经常使用window.location属性设定跳转资源的路径
window.location =“demo.html”;
}

点点我

2.2 常用方法

2.3 窗口打开和关闭

测试案例代码:

	function clickMe(){
				alert( "提示框:这是一段测试代码");
				//confirm确认提示框，存在两个按钮，返回true 或false 
				if(confirm("是否要开启一个新窗口")){
					open("01_window_属性.html","_blank","width=300px,height=300px"); 
				} 
				//prompt输入提示框
				var num = prompt("输入一个数字","");
				if(confirm("是否要关闭当前窗口")){
					close();
				}
}
<button onclick="clickMe()">点点我</button>

3.JavaScript对话框

3.1.分类

3.2.使用:

4.定时器

4.1 书写格式

4.2 实际应用

网页动态时钟

function timeStart(){
				var x = new Date();
				 //获取年份
				var year =x.getFullYear();
				//获取月份
				var month= x.getMonth()+1;
				//获取日 
				var date =x.getDate(); //返回日
				var weekday =x.getDay(); //返回星期
				var hour= x.getHours(); //返回小时
				var minute =x.getMinutes(); //返回分钟
				var second=x.getSeconds(); //返回秒
				switch(weekday){
					case  0: weekday ="星期日"; break;
					case  1: weekday ="星期一"; break;
					case  2: weekday ="星期二"; break;
					case  3: weekday ="星期三"; break;
					case  4: weekday ="星期四"; break;
					case  5: weekday ="星期五"; break;
					case  6: weekday ="星期六"; break;
				}
				var timeinfo = year+"-"+month+"-"+date+" " +weekday+" "+hour+":"+minute+":"+second;
				document.getElementById("timeSpan").innerHTML = timeinfo;
			}
			var nowtime=setInterval(timeStart,1000);
			function stopTime(){
				clearInterval(nowtime);
			}
			function startTime(){
				nowtime=setInterval(timeStart,1000);
			}
		当前时间:<span id="timeSpan"></span>
		<button onclick="startTime()">开始</button>
        <button onclick="stopTime()">停止</button>

制作倒计时
跑马灯效果

 //指示当前切换到第几张了
	  var index=1;
	  var imgs=['1.jpg','2.jpg','3.jpg'];
	  var img=document.getElementById("pttimg");
	  var lis=document.getElementById("pptul").getElementsByTagName("li");
 

  function changeImg() {
	  	img.src="images/"+imgs[index-1];
	  	//修改当前图片指示
	  	 if (index==1) {
			lis[lis.length-1].className="";
		} else {
            lis[index-1-1].className="";
		}
	  	 lis[index-1].className="current";
	  	index++;
	  	//越界了从头开始
	  	if (index==4) {
			index=1;
		}
	  }
   var interval=setInterval(changeImg, 2000);

<div id="pptdiv">
	<img alt="" src="images/1.jpg" id="pttimg">
	<ul class="pptul" id="pptul">
		<li class="current" id="li_1"></li>
		<li id="li_2"></li>
		<li id="li_3"></li>
	</ul>
</div>

.pptul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	position: absolute;
	bottom: 10px;
	/*让absolute定位的元素，水平居中*/
	left: 50%;
	margin-left: -50px;/*ul的一半*/
}

.pptul li {
    /*圆产生方法*/
	border: 15px solid red;
	border-radius: 15px;
	/*让li在一行显示且可以设置高度和宽度*/
	display: inline-block;
	width: 0px;
	height: 0px;
}

#pptdiv {
    /*div要和图片在同一个位置，同样大小；这样相对于div定位就相当于img定位*/
	width: 790px;
	height: 340px;
	position: relative;/*让div称为定位参考*/
}
#pptdiv .current{border-color: blue}