js经典案例

最新推荐文章于 2023-11-13 10:11:05 发布
最新推荐文章于 2023-11-13 10:11:05 发布
阅读量447 收藏 5
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66602553/article/details/123998932
版权

案例


今天就不讲理论了，给大家带来几个案例

1.随机数

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.tda {
				float: left;/* 左浮动 */
				width: 187px;/* 宽 */
				height: 115px;/* 高 */
				font-family: "微软雅黑";/* 字体类型 */
				background-color: #666;/* 背景颜色 */
				text-align: center;/* 右对齐 */
				line-height: 115px;/* 设置间距 */
				font-size: 80px;/* 字体大小 */
				margin: 10px;/* 外边框 */
			}

			input {
				width: 180px;/* 宽 */
				height: 65px;/* 高 */
				display: block;/* 把行级标签转为块级标签 */
				background-color: #F60;/* 背景颜色 */
				border: 0;/* 边框宽度 */
				cursor: pointer;
				font-family: "微软雅黑";/* 字体类型 */
				font-size: 40px;/* 字体大小 */
				font-size: 100%;
			}
		</style>
	</head>
	<body>
		<table align="center">
			<!-- 第一行：存放随机产生的数字 -->
			<tr>
				<td id="mydiva" class="tda">x</td>
				<td id="mydivb" class="tda">X</td>
				<td id="mydivc" class="tda">X</td>
			</tr>
			<!-- 第二行：两个按钮 -->
			<tr>
				<td colspan="3" align="center">
					<table>
						<tr>
							<td>
								<input type="button" onClick="mstart();" value="开始" />
							</td>
							<td>
								<input type="button" onClick="mstop();" value="停止" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		// 开始
		var s;
		function mstart() {
			// 定义一个名字数组
			var names = ["1", "2", "3", "4", "5", "6", "7"]; // 0到6
			// 随机数
			var sa = Math.round(Math.random() * 6);
			var sb = Math.round(Math.random() * 6);
			var sc = Math.round(Math.random() * 6);
			// 把随机产生的数字赋给单元格 td    
			document.getElementById("mydiva").innerHTML = names[sa];
			document.getElementById("mydivb").innerHTML = names[sb];
			document.getElementById("mydivc").innerHTML = names[sc];
			s = setTimeout("mstart()", 10);
		}
		// 停止
		function mstop() {
			clearInterval(s);
		}
	</script>
</html>

2.图片轮换

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a {
				font-size: 14px;
				color: #39F;
				height: 18px;
				width: 20px;
				border: 1px solid #39F;
				text-decoration: none;
				display: block;
				float: left;
				margin-right: 5px;
				text-align: center;
				background-color: #FFF;
				line-height: 20px;
			}

			a:hover {
				font-size: 14px;
				font-weight: bold;
				color: #FFF;
				background-color: #39F;
				border: 1px solid #39F;
				text-decoration: none;
				display: block;
			}

			#apDiv1 {
				position: absolute;
				width: 180px;
				height: 25px;
				z-index: 2;
				left: 100px;
				top: 13px;
			}
		</style>
	</head>
	<body>
		<table width="360" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td style="height:190px;">
					<div id="apDiv1">
						<a onmouseover="changeImage('1.gif')" href="javascript:changeImage('1.gif')">1</a>
						<a onmouseover="changeImage('2.gif')" href="javascript:changeImage('2.gif')">2</a>
						<a onmouseover="changeImage('3.jpg')" href="javascript:changeImage('3.jpg')">3</a>
						<a onmouseover="changeImage('4.jpg')" href="javascript:changeImage('4.jpg')">4</a>
						<a onmouseover="changeImage('5.gif')" href="javascript:changeImage('5.gif')">5</a>
					</div>
					<!-- 图片 -->
					<img src="img/1.gif" alt="图片" id="photo" />
				</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		function changeImage(na) {
			// 获取img标签
			var img = document.getElementById("photo");
			img.setAttribute("src", "img/" + na);
		}
	</script>
</html>

3.文字展示

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="fa()">
		<div id="da"></div>
	</body>
	<script type="text/javascript">
		var i = 1; //截取的结束下标
		function fa() {
			var str = "你看啥呢，傻帽，没见过帅13？？？";
			// 一个一个截取 str里面的文字
			var sa = str.substring(0, i);
			// 把sa赋给div
			document.getElementById("da").innerHTML = sa;
			if (i == str.length) { //当ｉ的值叠加到str的最大长度的时候再重新从第一个字截取
				i = 0;
			}
			// 更新i值
			i++;
			setTimeout("fa()", 300);
		}
	</script>
</html>
灰灰327
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript-Example-100:100个JavaScript实战案例，适合初学者系统学习
03-11
1.基础部分（20个） 1.1图片切换 1.2模拟上传文件判断 1.3 QQ好友列表 1.4开灯关灯 1.5网易云课堂拖放菜单 1.6百度登录 1.7模拟QQ聊天 1.8网易选项卡切换 1.9拖拽原理 1.10可进行QQ聊天 1.11数码时钟 1.12图片自动播放 1.13京东轮播 1.14模拟滚动条 1.15购物车应用 1.16表单验证 1.17创建文件夹 1.18放大镜 1.19控制盒子方向 1.20贪吃蛇游戏 2.面向对象部分（10个） 2.1面向对象基础知识 2.2面向对象写选项卡 2.3面向对象写拖拽 2.4封装弹窗组件 2.5天猫放大镜效果 2.6封装树形菜单 2.7照片墙效果 2.8封装工具库 2.9封装时间日期组件 2.10百叶窗 3三角函数部分（5个） 3.1实现苹果菜单 3.2三角函数，二次运动 3.3反三角函数和流媒体应用 3.4圆的碰撞 3.5 3D标签云 4. j
JS具体实例（一）
nabirt的博客
02-08 2970
JavaScript的一些实例记录
Javascript实例
index0000001的博客
06-24 1337
javascript实例
20个JavaScript开发案列（一）
终成大师的博客
02-17 4681
20个JavaScript开发案列（一）
js中的实例是什么,javascript小例子
2301_79533350的博客
11-07 156
在这种情况下，浏览器将访问 id=”demo” 的 HTML 元素，并把它的内容(innerHTML)替换为 “My First JavaScript”。JavaScript (JS)是属于网络的脚本语言，目前被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。与代数一样，JavaScript 变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。当向变量赋的值是数值时，不要使用引号。数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。
50个js经典案例
12-19
50个常用的js的案例，便于初学者更好的学习js
JavaScript经典案例大集合
03-07
该压缩包包含了8个经典案例文件，其中涉及到的案例多数比较经典，对于初学者来说，是熟悉掌握JS的好教程。
Js经典案例的实例代码
10-18
JS实现鼠标悬停切换图片,显示天气预报，利用焦点实现选择网站的实例代码，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧
20个JavaScript经典案例
最新发布
11-21
20个JavaScript经典案例
JS经典实例代码
04-26
JS经典实例代码,实现各种网站功能
JavaScript的100个经典实例
08-10
这是JavaScript的100个实例,希望学习的朋友可以看下,非常经典,囊括基础 JavaScript 实例、JavaScript 变量、JavaScript 条件语句 If ... Else等等
javascript大全之一
08-31 528
 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcElement.releaseCapture();  事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.
JavaScript 理论与实践 【目录 】
大剑师兰特的GIS世界
09-06 627
前端的开发离不开使用javascript，js是一门非常重要而且很灵活复杂的语言。本文是一个目录列表，方便查找一些经典的示例，能够快捷的应用的实际的开发中。文章是不断的增加，本目录也在不断的更新中，哪天能达到100个，就先庆祝一下~
【万字解析】JS逆向由浅到深，3个案例由简到难，由练手到项目解析（代码都附详细注释）
五包辣条的博客
07-12 8969
假设有一个网站，它使用了JavaScript来进行表单验证。当用户在登录表单中输入用户名和密码后，点击登录按钮时，JavaScript代码会对输入的用户名和密码进行验证，如果验证通过，则允许用户登录，否则会提示错误信息。
JavaScript核心-实战案例（一）
qq_46199553的博客
08-12 3086
2.1 API API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 简单理解： API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。 比如手机充电的接口： 2.2 Web API Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。 现阶段我们主要针对于浏览器讲解常用的
js案例总结合集
m0_70698588的博客
08-14 738
js案例
JS的实用案例
weixin_48912846的博客
12-23 710
JS的实用案例 简单案例： ①算出一个4位数，每一位数之和的结果。 var num3 = 3597 var q = parseInt(num3 / 1000) var b = parseInt(num3 % 1000 / 100) var s = parseInt(num3 % 100 / 10) var g = num3 % 10 var s6 = q + b + s + g console.log(num3+“中，每一位数之和是：”+s6); ...
js简单项目实战
ZHONGERMAOMAO的博客
11-13 311
使用 HTMLCollection对象的 length属性获取子元素的数量，然后使用序列号(index，起始值为0)访问每个子元素。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。children 属性返回元素的子元素的集合，是一个 HTMLCollection 对象。
javascript经典案例
09-24
下面是一些常见的JavaScript经典案例： 1. 动态修改网页内容 使用JavaScript可以在网页加载后动态修改网页内容，比如修改标题、添加新的段落或者图片等。 2. 处理表单 JavaScript可以用来验证表单输入的内容是否...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值