JS应用案例：轮播图，评论，表格隔行变色

已于 2022-09-22 19:14:26 修改
阅读量441 收藏 1
点赞数 2
分类专栏： JS案例 文章标签： javascript servlet 前端 学习
于 2022-09-21 16:42:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51810428/article/details/126975788
版权

评论案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
				
			textarea{
				width: 400px;
				height: 100px;
			}
			button {
				position: relative;
				left: 340px;
				top: 5px;
				border: 1px solid black;
				border-radius: 80px;
			}
			li{
				width: 370px;
				text-decoration: none;
				border: 1px solid #ccc;
				border-radius: 30px;
			}
		</style>
	</head>
	<body>
		<textarea id="text">请输入你的评论</textarea>
		<br />
		<button id="btn">发表评论</button>
		
		<ul id="utx">

		</ul>
	</body>
	
	<script>
        var text = document.getElementById("text");
        var btn = document.getElementById("btn");
        var utx = document.getElementById("utx");

        btn.onclick = function(){
            var creatLiEle=document.createElement('li');
			utx.insertBefore(creatLiEle,utx.firstElementChild);
            creatLiEle.innerHTML = text.value + "<a href='javascript:;'>删除</a>"
            text.value = ''

            var del = document.querySelectorAll('a')
            for (var i = 0; i < del.length; i++) {
                del[i].onclick = function () {
                    utx.removeChild(this.parentNode);
                }
            }
        }

        
		
	</script>
</html>

轮播图案例（只实现图片转换）： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 590px;
				height: 470px;
				background-color: #ccc;
				margin: 50px auto;
				position: relative;

			}

			img {
				width: 590px;
				height: 470px;

			}

			a {
				display: block;
				width: 25px;
				height: 34px;
				text-align: center;
				line-height: 34px;
				text-decoration: none;
				color: #fff;
				background-color: burlywood;
			}

			a:nth-of-type(1) {
				position: absolute;
				top: 218px;
				border-radius: 0 50% 50% 0;
			}

			a:nth-of-type(2) {
				position: absolute;
				top: 218px;
				right: 0;
				border-radius: 50% 0 0 50%;
			}

			ul li {
				list-style: none;
				display: inline-block;
				background-color: #fff;
				width: 9.97px;
				height: 9.97px;
				border: 1px solid #fff;
				border-radius: 50%;

				/* text-align: center;
				line-height: 25px; */
			}

			ul {
				position: absolute;
				bottom: 5px;
				left: 150px;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/car1.jpg" alt="">
			<!-- <img src="img/guoqing02.jpeg" alt="">
			<img src="img/guoqing03.jpeg" alt=""> -->
			<a href="#">&lt;</a>
			<a href="#">&gt;</a>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script>
			var number = 1;

			function run() {
				number++;
				if (number > 3) {
					number = 1;
				}
				var img = document.querySelector("img");
				img.src = "img/car" + number + ".jpg";
			}
			setInterval(run, 3000);
		</script>
	</body>
</html>

 

 

 

 

表格隔行变色案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" cellspacing = '0' width = '500px' height='300px'>
			<tr>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
			</tr>
			<tr>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
			</tr>
			<tr>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
			</tr>
			<tr>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
			</tr>
			<tr>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
			</tr>
			<tr>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
			</tr>
			<tr>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
			</tr>
			<tr>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
			</tr>
			<tr>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
			</tr>
			<tr>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
				<td>1-1</td>
			</tr>
		</table>
		
		<script>
			//获取所有的tr标签
			var trEles = document.querySelectorAll('tr');
			//从trEles集合中取出元素，下标为偶数的元素表示的是奇数行，下标为奇数的元素表示的是偶数行
			for(var i =0;i<trEles.length;i++){
				if(i%2==0){
					trEles[i].style.backgroundColor = '#ccc';
				}else{
					trEles[i].style.backgroundColor = '#f00';
				}
			}
			
			
			
		</script>
	</body>
</html>

 

import java.lx
关注
专栏目录
JS的一般事件，JS创建表格，开关思想以及三种轮播图
chihuomiao的博客
05-17 220
JS的一般事件 事件是文档或浏览器窗口中发生的，特定的交互瞬间。 经过子节点会触发和经过子节点不会触发的区别就是：经过子元素也算是进入/离开，而经过子节点不会触发的把子节点看成自己的组成部分，就不会触发，区别不能说很大，更不能说没有 JS创建表格 我们在获取元素的时候，如果定义是ID，可以直接使用不用获取 但是不推荐因为怕ID名你起重复忘了 开关：定义一个变量，决定一种状态 其实就是通过判断真假两种状态来执行不同的语句 最常见最简单的就是这种开关灯的效果，真的干什么，假的时候又干.
javaScript常用案例
张张张张张高高的博客
09-06 9310
前端页面开发之javaScript常用案例
js控制轮播表格
m0_69564658的博客
02-28 686
js控制表格轮播
JS+CSS 实现表格的轮播
qq_44881588的博客
11-02 763
实现表格等overflow:scroll 情况下的循环轮播。
js+jquery原生实现轮播表
m0_71585401的博客
06-02 438
js+jquery原生实现轮播表，鼠标移入停止滚动，鼠标移出继续滚动
利用JS+CSS实现滚动表格数据展示
06-06
利用CSS动画制作 Html 表格数据滚动显示, 实际自己开发也不难实现。实现的方法很多，下面是本人的一种实现方案，分享给大家。
JS各种实例web前端
10-09
5. **隔行变色**：在表格中，隔行变色可以提高数据的可读性。JS可以遍历表格行，根据行的索引应用不同的背景色。 6. **幻灯片焦点图**：幻灯片是一种展示多张图片轮播的特效，通常带有自动切换和手动切换功能。JS...
JavaScript的DOM知识点总结
ccj_cmp的博客
08-13 805
JavaScript的DOM操作详解
JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts（2）
weixin_43200099的博客
03-22 1579
Web APIs Web APIs和JS基础关联性 API和Web API API:应用程序编程接口 Web API：浏览器提供的一套操作浏览器功能和页面元素的API（BOM DOM） DOM DOM即文档对象模型，处理HTML或XML的标准编程接口。通过DOM接口可以改变样式内容结构。如可以做轮播图、倒计时… DOM树 DOM把以上内容都看作对象。 获取元素 ID、标签名、H5新方法、特殊 getElementByld()返回一个匹配的ID元素 getElementsByTagName(） 返回标签
JavaScript学习笔记
weixin_42530002的博客
11-04 5941
一、JavaScript 1、字符串 (1)、验证码 (2)、将字符串按照单词进行逆序，空格作为划分单词的唯一条件 (3)、对称数组 (4)、已知一个字符串对象中,英语单词用各种非字母字符分割，统计单词个数 (5)、判断单个字符是否是字母(包含大小写) (6)、实现函数，查找子串出现的次数，返回字符串str中出现substring的次数 (7)、判断是否为邮箱，已知千锋邮箱的用户名只能由数字字母下划线组成，域名为@1000phone.com, (8)、判断单个字符是否符合数字字母下划线 (9)、敏感词过滤
javascript实现轮播效果示例
02-15
利用js实现轮播效果 其中封装了一个简单的匀速动画函数
原生JS实现简单的无缝自动轮播效果
10-17
轮播效果是老生常谈的话题，今天小编通过实例代码给大家分享原生JS实现简单的无缝自动轮播效果，感兴趣的朋友跟随小编一起学习吧
表格实现轮播效果
weixin_62173681的博客
11-22 940
element-ui表格实现轮播效果
javaScript小案例------js实现无缝轮播图效果篇
前端叶荨，随手记
03-30 2066
javaScript小案例------js无缝轮播图篇 原生js实现无缝轮播图
表格中TD 图片切换（轮播）
qq_35644434的博客
07-28 927
var setImg = function(data,type,row,idx){             if(!data){                 return "";             }             var imgUrlArr = data.split(",");             var imgUrls = [];             f
使用JavaScript实现轮播图功能（超详细）
最新发布
rr20060119的博客
03-29 2336
通过自动或手动切换，轮播图能够有效地吸引用户的注意力，并展示重要的信息。在本篇博客中，我们将详细介绍如何使用原生JavaScript来实现一个简单的轮播图功能。切换图片：编写一个函数来切换图片，通过改变轮播图容器的transform属性来实现。首先，我们创建一个简单的HTML结构，其中包含轮播图的容器、图片和控制按钮。现在，我们使用JavaScript来实现轮播图的功能。设置状态：为轮播图设置一个当前索引状态，用于跟踪当前显示的图片。HTML结构：创建一个包含图片和轮播图控制按钮的HTML结构。
使用原生js实现轮播图
weixin_44425388的博客
08-02 207
通过原生js实现无缝轮播图效果
js最简单的轮播
brid_fly的博客
06-10 271
&lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;         &lt;style&gt;             span{                 width:40px;                 disp
javaScript学习小练习 99乘法表 动态表格 轮播图 自动跳转 表格全选
Kiven_zhou的博客
07-11 325
99乘法表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>99乘法表</title> <style> td{ border: 1px solid; } </style> <script> doc
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值