如何使用jQuery制作一个点名器

最新推荐文章于 2024-08-04 14:28:38 发布

跨时空思念ღ

最新推荐文章于 2024-08-04 14:28:38 发布

阅读量450

点赞数 1

本文链接：https://blog.csdn.net/Xian_Hu/article/details/120752134

版权

使用jquery制作点名器的话需要引入jquery，引入jquery有两种方法：

一种是下载jquery包，拖入文件夹中进行引入

另一种是引入线上jquery，这种方法比较方便，直接粘贴复制即可

这个链接是链接到菜鸟教程中jquery代码，直接粘贴复制即可

菜鸟教程在线编辑器https://www.runoob.com/try/try.php?filename=tryjquery_lib_runoob

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
			
	</script>

相对于js来写点名器，jquery更加方便简单，也更容易理解

点名器样式可能有点草率，但不影响使用，即可自行修改，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
    //样式
	<style type="text/css">
		.boss{
			width: 200px;
			height: 300px;
			margin: 0 auto;
		}
		.box{
			width: 200px;
			height: 80px;
			background-color: aquamarine;
			font-size: 30px;
			text-align: center;
			line-height: 30px;
		}
		.p1{
			font-weight: bold;
			text-align: center;
		}
		#kaishi{
			margin-top: 20px;
			margin-left: 50px;
		}
	</style>
</head>
<body>
	<div class="boss">
		<p class="p1">选择专业</p>
		<div class="box"></div>
        //开始按钮，并且设置一个点击事件
		<button onclick="kai()" id="kaishi">开始</button>
        //结束按钮，并且设置一个点击事件
		<button onclick="jie()">结束</button>
	</div>
    //引入线上jquery属性
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
            //自定义函数，点击开始运行
			function kai()
			{
                //并且开启定时器
				time = setInterval('kai1()',10)
			}
            //自定义函数，书写定时器里的内容
			function kai1 ()
			{
                //定义数组，存放点名器内容
				var arr = ["云计算","传媒","全栈","网站","游戏"]
                //将内容进行取整和求个数
				var i   = Math.floor(Math.random()*arr.length)
                //将内容存储
				$(".box").html(arr[i])
			}
            //自定义函数，点击结束停止
			function jie()
			{
                //结束定时器
				clearInterval(time)
			}
	</script>
</body>
</html>

跨时空思念ღ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用jQuery制作一个点名器

使用jquery制作点名器的话需要引入jquery，引入jquery有两种方法：一种是下载jquer包，拖入文件夹中进行引入另一种是引入线上jquery，这种方法比较方便，直接粘贴复制即可这个链接是链接到菜鸟教程中jquery代码，直接粘贴复制即可https://www.runoob.com/try/try.php?filename=tryjquery_lib_runoob &lt...
复制链接

扫一扫