코딩/HTML

[HTML] Event

peter_00 2024. 5. 10. 17:34
반응형

유저가 하얀 원을 클릭하면 검정 원으로 변경, 검정 원을 클릭하면 하얀 원으로 변경

images 폴더에 2개의 사진을 저장

<html>
<body>
<img id="circle" src="circle1.png" onClick="changeCircleImage()" />

<script>
function changeCircleImage() {
    var image = document.getElementById("circle");
    if (image.src.includes("circle1"))
	{	image.src = "circle2.png"; }
	else 
	{	image.src = "circle1.png";}
}
</script>
</body>
</html>

 

 

클릭시 특정 웹사이트로 이동하는 코드

<button onClick="goToUOW()">Click me to visit UOW</button>
	function goToUOW() {window.location.assign("http://www.uow.edu.au");
}

 

유저가 입력한 값을 대문자로 바꾸는 기능

Enter discount code:
<input type="text" id="discountCode" onChange="uppercase()">
function uppercase(){
	var e = document.getElementById("discountCode");
	e.value = e.value.toUpperCase();
}

 

마우스 커서를 올렸을 시 특정효과가 나타나는 기능

<html>
<head>
<script>
function mouseDown() { 
  document.getElementById("demo").innerHTML = "Release Me";
}
function mouseUp() { 
  document.getElementById("demo").innerHTML = "Thank You";
}
function mouseOver() {
  document.getElementById("demo1").innerHTML = "Thank You demo1"
}
function mouseOut() {
  document.getElementById("demo1").innerHTML = "Mouse Over Me"
}
</script>
</head>

<body>
<span id="demo" onMouseDown="mouseDown()" onMouseUp="mouseUp()">
Click Me
</span>
<br/>
<span id="demo1" onMouseOver="mouseOver()" onMouseOut="mouseOut()">
Mouse Over Me
</span>
</body>
</html>

 

createElemt 를 이용해서 웹사이트에 값이 보이게 추가하기

<html>
<head> 
<script>
function addSubject(){
  //ask user for a subject code
  var subject = prompt("Enter subject code");

  if(subject != null){
    var para = document.createElement("p");
    var node = document.createTextNode(subject);
    para.appendChild(node);
    document.getElementById("subjectList").appendChild(para);
  }
}
</script>
</head>
<body>
	<button onClick="addSubject()">Click here to add subject</button>
	<div id="subjectList">123</div>
</body>
</html>

 

ul 과 li를 이용해서 리스트를 생성하는 기능

<html>
<head> 
<script>
function addSubject(){
  //ask user for a subject code
  var subject = prompt("Enter subject code");

  if(subject != null){
    var para = document.createElement("li");
    var node = document.createTextNode(subject);
    para.appendChild(node);
    document.getElementById("subjectList").appendChild(para);
  }
}
</script>
</head>
<body>
	<button onClick="addSubject()">Click here to add subject</button>
	<ul id="subjectList">123</ul>
</body>
</html>

에시

setInterval을 이용해서 팝업 표시 하거나 지우기

<html>
<head>
<script>
var alertSchedule;

function stopIt(){
  clearInterval(alertSchedule);
}

function alertForever(){
  //calling alertFunction for every 5000 miliseconds
  alertSchedule = setInterval(alertFunction, 5000);
}

function alertFunction() {
  alert("Hello!");
}
function startClock(){
  //calling displayClock for every 1000 miliseconds
  var clockSchedule = setInterval(displayClock, 1000); 
}

function displayClock() {
  document.getElementById("clock").innerHTML = new Date();
}

</script>
</head>

<body>
<button onClick="alertForever()">
Click here if you like alert!
</button>
<br>
<button onclick="stopIt()">
Click here if you have enough!
</button>
<br>
<button onclick="startClock()">
Click here to start the clock
</button>

<span id="clock"></span>

</body>
</html>

 

setInterval을 이용해서 타이머 기능 만들기

<html>
<head> 
<script>
function startClock(){
  //calling displayClock for every 1000 miliseconds
  var clockSchedule = setInterval(displayClock, 1000); 
}

function displayClock() {
  document.getElementById("clock").innerHTML = new Date();
}
</script>
</head>
<body>
<button onclick="startClock()">Click here to start the clock</button>
<span id="clock"></span>
</body>
</html>

 

setInverval을 이용해서 움직이는 텍스트 만들기

<html>
	<head>
	<script>
function moveText() {
  var e = document.getElementById("movingText");   
  var pos = 0;
  var moveTextSchedule = setInterval(move, 100);
  
  function move() {
    pos++; 
    e.style.top = pos + 'px'; 
    e.style.left = pos + 'px'; 
	  
    if (pos == 300) {
      clearInterval(moveTextSchedule);
    }
  }
}
</script>
	</head>
	<body>
<button onclick="moveText()">Click here to move text</button>
<span id="movingText" style="position:absolute;">Moving text</span>
</body>
</html>

 

슬라이드 쇼 만들기

<html>
<head>
<script>
function slideShow() {
	var imageSchedule = setInterval(changeImage, 2000);
}
function changeImage() {
    var imageList = ["images/simpson2.png", "images/simpson4.png",
    "images/simpson6.png", "images/simpson1.jpg", "images/simpson3.jpg",
    "images/simpson5.png", "images/simpson7.jpg"];
   
   	//get a random image index
    var index = Math.floor(Math.random() * imageList.length);
   
   	var image = document.getElementById("simpson");
    
    //set the image source
    image.src = imageList[index];
}
</script>
</head>
<body>
	<img id="simpson" src="images/simpson1.jpg" height="500px" />
	<script>slideShow();</script>
</body>
</html>

 

반응형