JavaScript tutorials

Blog Home Page: The Home Page of Ah Shi's Blog
Welcome to your attention 🖱 Give the thumbs-up 🎀 Collection ⭐ Leaving a message. ✒
Series Columns: JavaScript Start Time: 🎞 August 5, 2022 🎠
If you think the blogger's article is good, please support the blogger three times.

1. Overview of JavaScript DHTML

Introduction to 1.1DHTML

Definition of DHTML
Using JavaScript and CSS cascading style sheets to manipulate HTML to create a variety of dynamic visual effects collectively known as DHTML, a browser-side dynamic web page technology
Functions of DHTML
Change font size and color dynamically
Dynamically set the position, content, and even hide and display elements of a document
Dynamic collapsed tree structures and menus can be created through event response mechanisms
Clocks, calendars can be made with timers
You can pop up a dialog box to interact with the user
User-filled information can be submitted through the form
Dynamic stylesheets allow you to set more display effects

Functions of 1.2DHTML

About the DHTML Object Model
Objectify HTML tags, attributes, and CSS styles
Dynamic access to all elements in an HTML document
Objects can be accessed or marked with an attribute name or id
Update display in browser immediately after changing element content or style
DHTML object model includes browser object model and Document object model

2.Window Objects

2.1 Main Properties

Attribute case:
function clickMe(){
alert( window.location );
alert(window.closed);
window.status= "test window";
Alert;
//In JavaScript programming, the window.location property is often used to set the path to jump resources
window.location ="demo.html";
}

Click on me

2.2 Common Methods

2.3 Window Open and Close

Test case code:

	function clickMe(){
				alert( "prompt box:This is a test code");
				//confirm confirmation prompt, there are two buttons, return true or false 
				if(confirm("Do you want to open a new window")){
					open("01_window_attribute.html","_blank","width=300px,height=300px"); 
				} 
				//Prompt input prompt box
				var num = prompt("Enter a number","");
				if(confirm("Do you want to close the current window")){
					close();
				}
}
<button onclick="clickMe()">Click on me</button>

3.JavaScript Dialog

3.1. Classification

3.2. Use:

4. Timer

4.1 Writing Format

4.2 Practical application

Web Page Dynamic Clock

function timeStart(){
				var x = new Date();
				 //Get Year
				var year =x.getFullYear();
				//Get Months
				var month= x.getMonth()+1;
				//Get Days 
				var date =x.getDate(); //Return Day
				var weekday =x.getDay(); //Back to Week
				var hour= x.getHours(); //Return Hours
				var minute =x.getMinutes(); //Return minutes
				var second=x.getSeconds(); //Return seconds
				switch(weekday){
					case  0: weekday ="Sunday"; break;
					case  1: weekday ="Monday"; break;
					case  2: weekday ="Tuesday"; break;
					case  3: weekday ="Wednesday"; break;
					case  4: weekday ="Thursday"; break;
					case  5: weekday ="Friday"; break;
					case  6: weekday ="Saturday"; 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);
			}
		current time:<span id="timeSpan"></span>
		<button onclick="startTime()">start</button>
        <button onclick="stopTime()">Stop it</button>

Make Countdown
Horselight effect

 //Indicates that you are currently switching to the first
	  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];
	  	//Modify the current picture indication
	  	 if (index==1) {
			lis[lis.length-1].className="";
		} else {
            lis[index-1-1].className="";
		}
	  	 lis[index-1].className="current";
	  	index++;
	  	//Begin over the border
	  	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;
	/*Elements positioned by absolute, horizontally centered*/
	left: 50%;
	margin-left: -50px;/*ul Half*/
}

.pptul li {
    /*Circle Generation Method*/
	border: 15px solid red;
	border-radius: 15px;
	/*Let li appear on one line and set height and width*/
	display: inline-block;
	width: 0px;
	height: 0px;
}

#pptdiv {
    /*div Same size as the picture in the same location; This corresponds to img positioning relative to div positioning*/
	width: 790px;
	height: 340px;
	position: relative;/*Let div be referred to as positioning reference*/
}
#pptdiv .current{border-color: blue}