JavaScript 用途归纳

最新推荐文章于 2021-12-01 15:49:25 发布

ths99

最新推荐文章于 2021-12-01 15:49:25 发布

阅读量152

点赞数

分类专栏： JavaScript 文章标签： JavaScript JavaScript常见用法 HTML

本文链接：https://blog.csdn.net/qq_34123985/article/details/89070838

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

JavaScript 在HTML中常见用法

显示弹框

使用window.alert()方法

<script>
		window.alert("欢迎")
	</script>

将内容写入HTML文档中

使用 document.write() 方法

<h2>将内容写入到HTML中</h2>
	<script>
		document.write("你的能量，超乎你的想象")
	</script>

对事件做出反应

JavaScript 在 html中经常与标签 <button> 结合使用，对在事件驱动之下改变 html 内容或者样式。

	<button type="button" onclick="alert('天道酬勤')">点击显示弹框</button>

改变 HTML 内容

<p id="demo">你的能量</p>
	<script>
		function changeword(){
			a=document.getElementById("demo");
			a.innerHTML="超乎你的想象";
		}
	</script>
	<button type="button" onclick="changeword()">点击这里获取答案</button>

点击前：

点击后：

改变 HTML 样式

<body>
	<script>
	function changestyle()
	{
		x=document.getElementById("demo");//找到元素
		x.style.color="#00ff00"; //改变颜色
	}
	</script>
	<P id="demo">你的能量，超乎你的想象</P>
	<button type="button" onclick="changestyle()">点击这里更换颜色</button>
</body>

点击按钮之前：

点击按钮之后

验证输入

<body>
	<P>请输入数字</P>
	<input id="demo" type="text">
	<script>
	function judge()
	{
		var number=document.getElementById("demo").value;
		if(isNaN(number))
		{
			alert("输入格式错误")
		}
	}
	</script>
	<button type="button" onclick="judge()">点击提交</button>
</body>

点击按钮之前

点击按钮之后

小结，javascript常用语句块

<P id="demo">操作对象</P>
<script>
function myfunction() //具体操作函数
{
	x=document.getElementById("demo");//获取操作对象
	//code 具体操作行为
}
</script>
<button type="button" onclick="myfunction()">提示按钮</button>