当前位置：主页 > 查看内容

JavaScript

发布时间：2021-07-11 00:00| 有 位朋友查看

简介：这周学习JavaScript主要通过两个实例 h1 测试者 : / h1 p id demo1 / p h1 onclick this.innerHTML其实就在下面: 点击查看函数表达式 / h1 p id demo2 / p script var person { firstName : Tian , lastName : rao , xingbie : 女 , id : 1314 , fullName :……

这周学习JavaScript，主要通过两个实例：

<h1>测试者:</h1>
	<p id="demo1"></p>
	<h1 onclick="this.innerHTML='其实就在下面:'">点击查看函数表达式</h1>
	<p id="demo2"></p>
	<script>
	var person = {
	    firstName: "Tian",
	    lastName : "rao",
		xingbie:"女",
	    id : 1314,
	    fullName : function() 
		{return this.firstName + " " + this.lastName + "<br>"+this.xingbie;}};
	document.getElementById("demo1").innerHTML = person.fullName();
	document.getElementById("demo2").innerHTML = person.fullName;</script>
	<h1>测试内容：</h1>
<p><b>你想回家吗？</b></p>
<p id="demo">请选择以下两个选项</p>
<button type="button" onclick="myFunction()">想</button>
<button type="button" onclick="alert('你个不孝子!')">不想</button>
<script src="js/myScript.js"></script>
  1. 把一个 JavaScript 函数放置到 HTML 页面的 <head>或<body> 部分,该函数会在点击按钮时被调用。
  2. 也可以把脚本保存到外部文件中，通常包含被多个网页使用的代码，外部 JavaScript 文件的文件扩展名是 .js。
    这个例子中用到的外部文件代码为：
 function myFunction()
{document.getElementById("demo").innerHTML="不！<br>你不想";}

function myfunction()
{ document.getElementById("demo").innerHTML="function() { return this.firstName + " " + this.lastName + "
" +this.xingbie; }"; }

其结果截图为：
在这里插入图片描述
点击两个按钮有不同的效果：
4. 点击“想”出来的是：
在这里插入图片描述
5. 点击“不想”则是：
在这里插入图片描述
6. 上面的“点击查看函数表达式”的点击，其实我本来是想做成点击就出来表达式的，奈何学艺不精不知道怎么变不成函数，我还要在研究研究。最后做出来就成了这样：
在这里插入图片描述

 <script>
		function mypicture(){
document.getElementById("image").src="img/Penguins.jpg";}
</script>
</head>
<body>
<img id="image" src="img/Lighthouse.jpg" width="160" height="120">
	<p><button onclick="mypicture()">切换图片</button></p>
	<script>
		function myPicture(){
document.getElementById("image").src="img/Lighthouse.jpg";}
</script>
	<p><button onclick="myPicture()">切换为上一张图片</button></p>

简单的切换图片代码，图片可以自己选择。本来只能从第一张切换到第二张，加了一个按钮反着设置可以切换回去，但是两个按钮就很冗余。不知道哪个大佬可以改进一下，告诉小白我。

  1. 还有一个有趣的例子：改变 HTML 图像
    实际上就是两张灯泡图片的切换，但是能做出点击开灯关灯的效果：
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>	
<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
	{element.src="/images/pic_bulboff.gif";}
	else
	{element.src="/images/pic_bulbon.gif";}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>	
</body>
</html>

其中images/pic_bulboff.gif即灯泡图片：
在这里插入图片描述在这里插入图片描述
要注意其中图片的名称最好不要设置成中文，因为代码可能识别不出来，最后只能开灯关不了或者关了就开不了。
这周就到这啦，下周见！

；原文链接：https://blog.csdn.net/AXN567/article/details/115599949
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：JSP和Thymeleaf 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐