JavaScript实例

Posted 2020-10-06 Oracle&Java

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript实例相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>jstest</title>
	<style type="text/css">
		.abc{
			height: 100px;
			width: 100px;
			background-color:green;
			margin: auto;
		}
	</style>
	<script type="text/javascript">
	var addValue=10;
		function funclick(argument) {
			// body...
			var zx=document.getElementById("abc");
			zx.style.backgroundColor="red";//中划线删除，第二个单词首字母大写
			

			zx.style.width="120px";
			zx.style.height="120px";

			var x=zx.style.width;
			x=x.replace("px","");
			var xValue=parseInt(x);


			var y=zx.style.height;
			y=y.replace("px","");
			var yValue=parseInt(y);

			zx.style.width=xValue+addValue+"px";
			zx.style.height=yValue+addValue+"px";

			addValue+=10;

		}

/*实现盒子动态变化大小，取字符串中的搜需内容，修改后加到元字符串中替换原字符串*/
function func(){
				var img=document.getElementById("ad");
				//img.src="2.jpg";
				var str=img.src;
				
				//alert(img.src);
				//alert(img.src.indexOf("1.jpg"));/*原理寻找子字符串在父字符串中的索引值，子字符串存在则返回大于等于0的数值，初始值为0，子字符串
不存在否者返回-1*/
				
				if(str.indexOf("images/1.jpg")>=0){
					img.src="images/2.jpg";
				}else{
					img.src="images/1.jpg";
				}	
			}

	</script>
</head>
<body>
<div id="abc" class="abc" onclick="funclick()"></div>
<span><img src="1.jpg" id="ad"></span>
<button onClick="func()">点击变瘦</button>
</body>
</html>

以上是关于JavaScript实例的主要内容，如果未能解决你的问题，请参考以下文章

Python 自动化 - 浏览器chrome打开F12开发者工具自动Paused in debugger调试导致无法查看网站资源问题原因及解决方法，javascript反调试问题处理实例演示(代码片段

创建片段而不从 java 代码实例化它

VSCode自定义代码片段12——JavaScript的Promise对象

30秒就能看懂的JavaScript 代码片段

常用Javascript代码片段集锦