Html笔记

最新推荐文章于 2024-01-18 19:00:14 发布

原创最新推荐文章于 2024-01-18 19:00:14 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

Html 专栏收录该内容

2 篇文章

订阅专栏

本文通过四个实例介绍了JavaScript在网页上的应用，包括使用prompt进行数据输入并排序显示、键盘事件监听实现文本输入到文本区域、阻止链接默认行为及弹窗提示、以及鼠标点击事件动态添加和删除DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

test1--

<html>
<head>
<title>js输入对话框</title>
</head>
<body>
<script language="javascript">

function myClick(){

		str = prompt("请输入你的数据:","");
		if (str != null){
		a = str.split(",");
		a.sort();
		alert(a);
		}
	}
</script>

<button type="button" onclick = "myClick()">Click Me!</button>
</body>
</html>

test2---

<html>
<head>
<title>js输入对话框</title>
</head>
<body >


<input type="text" id="input" style="width: 150px">
<p>
<textarea id="textarea" style="width:150px;height: 200px"></textarea>


</body>
<script type="text/javascript">
	var input = document.getElementById("input");
	input.onkeydown = function(event){
		if(event.keyCode==13){
			var textarea = document.getElementById("textarea");
			textarea.value+=input.value+"\n";
			this.value = "";
		}
	}
</script>
</html>

test3---

<html>
<head>
<title>js输入对话框</title>
</head>
<body >



<a id="link" href="http://www.baidu.com">点击跳转</a>

</body>
<script type="text/javascript">

document.getElementById("link").onclick = function(event){
	alert("hellow world!");
	var event = event||window.event;
	if(event.preventDefault)event.preventDefault();//W3C
	if(event.returnValue)event.returnValue=false;//<Ie9
	return false;//用于标签事件属性绑定的事件函数

	
}
</script>
</html>

test4--

<html>
<head>
<title>test4</title>
</head>
<body>

</body>
<script language="javascript">

function addDom(){
			var evt = evt||event;
			var x = evt.clientX;
			var y = evt.clientY;
			var span = document.createElement("span");
			span.appendChild(document.createTextNode("这是子节点"));
			span.style.position = "absolute";
			span.style.border = "1px solid green";
			span.style.left = x;
			span.style.right = y;
			span.style.top = y;
			span.backgroundColor = "#ffff00";
			span.style.color="#000000";
			span.style.padding = "2px";
			span.onclick = delDom;
			document.body.appendChild(span);
			if(window.event){
				evt.cancelBubble = true;
			}else{
				evt.stopPropagation();
			}
	}


	function delDom(evt){
		var evt = evt||event;
		document.body.removeChild(this);
		if(window.event){
			//如果不取消冒泡，会再次调用addDom函数
			evt.cancelBubble=true;
		}
		else{
			evt.stopPropagation();
		}
	}
	document.onclick = addDom;
</script>
</html>