JS学习第一天by SixInNight-优快云博客

本文链接：https://blog.youkuaiyun.com/hongwangdb/article/details/107570640

JS学习第一天

图片滚动

有缝隙滚动

代码

<html>
<body>
	<marquee direction="left" height="340" width="390" scrollamount="16"
	bgcolor="#ff3c3c" onmouseover="stop()" onmouseout="start()">
		<img src="chips.gif" height="340" width="340">
		<img src="tuosaisai.png" height="340" width="340">
		<img src="Six'sBlog.gif" height="340" width="340">
		<img src="superman.jpg" height="340" width="340">
	</marquee>
</body>
</html>

效果

无缝隙滚动

代码

<html>
<body>
	<div id="qp" style="overflow:hidden; height:240px; width:260px; background-color:red">
		<table cellpadding="0" cellspacing="0" border="0"><tr>
			<td id="qp1">
				<table height="240px" width="280px" cellpadding="0" cellspacing="0" border="0"><tr>
					<td><img src="chips.gif" height="240px" width="240px"></td>
					<td><img src="tuosaisai.png" height="240px" width="240px"></td>
					<td><img src="Six'sBlog.gif" height="240px" width="240px"></td>
					<td><img src="superman.jpg" height="240px" width="240px"></td>
				</tr></table>
			</td>
			<td id="qp2"></td>
		</tr></table>
	</div>
	<script type="text/javascript">
		var speed = 12;
		var pq = document.getElementById("qp");
		var pq1 = document.getElementById("qp1");
		var pq2 = document.getElementById("qp2");
		pq2.innerHTML = pq1.innerHTML;
		function Marquee(){
			if(pq2.offsetWidth - pq.scrollLeft <= 0)
				pq.scrollLeft -= pq1.offsetWidth
			else{
				pq.scrollLeft++;
			}
		}
		var MyMar=setInterval(Marquee,speed);
		pq.onmouseover=function() {clearInterval(MyMar)};
		pq.onmouseout=function() {MyMar = setInterval(Marquee, speed)};
	</script>
</body>
</html>

简单的计算器

<html>
<body>
	<form>
		<table border=1>
			<td colspan=4><input type="text" id="calc" size=30><tr>
			<td><input type="button" value="    7     " onclick="enter(seven)">
			<td><input type="button" value="    8     " onclick="enter(eight)">
			<td><input type="button" value="    9     " onclick="enter(nine)">
			<td><input type="button" value="    /      " onclick="enter(divide)"><tr>
			<td><input type="button" value="    4     " onclick="enter(four)">
			<td><input type="button" value="    5     " onclick="enter(five)">
			<td><input type="button" value="    6     " onclick="enter(six)">
			<td><input type="button" value="    *      " onclick="enter(mutiply)"><tr>
			<td><input type="button" value="    1     " onclick="enter(one)">
			<td><input type="button" value="    2     " onclick="enter(two)">
			<td><input type="button" value="    3     " onclick="enter(three)">
			<td><input type="button" value="    -      " onclick="enter(minus)"><tr>
			<td colspan=2><input type="button" value="             0             " onclick="enter(zero)">
			<td><input type="button" value="    .      " onclick="enter(point)">
			<td><input type="button" value="    +     " onclick="enter(plus)"><tr>
			<td colspan=2><input type="button" value="             =             " onclick="compute()">
			<td colspan=2><input type="button" value="            AC           " onclick="myclear()">
		</table>
	</form>
	<script type="text/javascript">
		var obj = document.getElementById('calc');
		var one = '1';
		var two = '2';
		var three = '3';
		var four = '4';
		var five = '5';
		var six = '6';
		var seven = '7';
		var eight = '8';
		var nine = '9';
		var zero = '0';
		var plus = '+';
		var minus = '-';
		var mutiply = '*';
		var divide = '/';
		var point = '.';
		function enter(string) {obj.value += string}
		function myclear() {obj.value = ""}
		function compute() {obj.value = eval(obj.value)}
	</script>
</body>
</html>

在这里插入图片描述