js小效果

最新推荐文章于 2019-09-28 12:04:48 发布

tarajk05

最新推荐文章于 2019-09-28 12:04:48 发布

阅读量263

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/tarajk05/article/details/42029355

版权

html css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript"></script>
		<style type="text/css">
			#main{
				width: 300px;
				height: 400px;
				border: 2px solid gray;
				margin:0 auto;
				border-radius: 5px;
				padding: 10px;
			}
			#send{
				width: 300px;
				height: 50px;
				border: 2px solid lightgray;
				border-radius: 5px;
				margin: 0 auto;
			}
			#img{
				width: 49px;
				height: 49px;
				border: 1px solid lightgreen;
				border-radius: 5px;
				margin-right: 5px;
				float: left;
			}
			#iup{
				height: 30px;
				line-height: 30px;
				vertical-align: middle;
				text-align: center;
			}
			#clic{
				font-size: 18px;
				font-weight: bold;
				text-decoration: none;
				color: gray;
			}
			.xin{
				width: 200px;
				height: 100px;
				border:1px solid blue;
			}
		</style>
	</head>
	<body>
		<div id="main"></div>
		<div id="send">
			<div id="pic"><img id="img" src="1.png" /></div>
			<input type="text" id="iup" />
			<a id="clic" href="javascript:;">发送</a>
		</div>
	</body>

	<script type="text/javascript">
		var oMain=document.getElementById("main");
		var oImg=document.getElementById("img");
		var oPic=document.getElementById("pic");
		var oIup=document.getElementById("iup");
		var oClic=document.getElementById("clic");
		var onOff = 1;
		oImg.onclick = function (){
			if(onOff){
				oImg.src="2.png";
				onOff=0;
			}else{
				oImg.src="1.png";
				onOff=1;
			}
			//alert(oPic.innerHTML);
			//oMain.innerHTML = oPic.innerHTML;
			//alert(oMain.innerHTML);
		}

		oClic.onclick = function (){
			//oMain.innerHTML = oPic.innerHTML + oIup.value + "<br />";
			oMain.innerHTML = oPic.innerHTML + oIup.value +"<br />"+ oMain.innerHTML + "<br />";
			oIup.value = '';
		}



	</script>
</html>

tarajk05

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js小效果

#main{ width: 300px; height: 400px; border: 2px solid gray; margin:0 auto; border-radius: 5px; padding: 10px; } #send{ width: 300px; height: 50px; border: 2px
复制链接

扫一扫