欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS学习第一天by SixInNight

程序员文章站 2022-03-28 16:12:05
JS学习第一天图片滚动有缝隙滚动无缝隙滚动简单的计算器图片滚动有缝隙滚动代码

JS学习第一天




JS学习第一天by SixInNight

图片滚动

有缝隙滚动

  • 代码
<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>
  • 效果
    JS学习第一天by SixInNight

无缝隙滚动

  • 代码
<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>

JS学习第一天by SixInNight

本文地址：https://blog.csdn.net/hongwangdb/article/details/107570640

相关标签： 前端 js html marquee 计算器

上一篇： 如何用 Python 自动化操作 Excel

下一篇： AS打包release出现的问题

推荐阅读