实习日记--day9

最新推荐文章于 2022-09-09 10:41:54 发布

xpz的三级包

最新推荐文章于 2022-09-09 10:41:54 发布

阅读量309

点赞数

文章标签：实习前端 JavaScript

本文链接：https://blog.csdn.net/qq_40115021/article/details/94592198

版权

前端学习

JavaScript基础

JavaScript基础

怨无大小，生于所爱

第一个JS程序

<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点我改变样式</button>

在这里插入图片描述运行结果如下图所示：
点击按钮后
可以看到JS代码是可以直接改变网页的样式的。

用JS显示日期

<head>
<meta charset="utf-8">
<title>实例</title>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>

<h1>这是一个标题</h1>
<p id="demo">这是一个段落</p>

<button type="button" onclick="displayDate()">显示日期</button>

</body>

在这里插入图片描述运行结果如下：
点击按钮后

事件响应

<head> 
<meta charset="utf-8"> 
<title>实例</title> 
</head>
<body>
	
<h1>这是一个标题</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button>
	
</body>

在这里插入图片描述
运行结果如下：

点击按钮后
其中alert(message) 方法用于显示带有一条指定消息(message)和一个 OK 按钮的警告框。

改变文本内容

<head> 
<meta charset="utf-8"> 
<title>实例</title> 
</head>
<body>
	
<h1>这是一个标题</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>

在这里插入图片描述运行结果如下：
点击按钮后

判断条件弹框

<meta charset="utf-8"> 
<title>实例</title> 
</head>
<body>
	
<h1>这是一个标题</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>