JS CSS HTML 的代码如何快速封装

news2024/12/25 17:59:02

我们为什么要封装代码,是因为封装后的代码,会显得非常美观,减少代码的复用,方便我们更好的去维护代码,不用一个一个页面的去找去改,直接封装好的代码里面去改就可以了

目录

1.html代码封装

 2.CSS代码封装

3.JS代码封装

4.html,css,js引入公共的代码的方法


1.html代码封装

如果每个页面或者多个页面都有一样的结构,可以再设置一个html文件,用来写这些结构,然后再要所有的html文件里面使用iframe样式,通过iframe引入html结构,如果一个div或元素就可以完成的事情,就不要去嵌套多个div或元素

具体操作,然后引入的方法在最下面

<!-- 公共布局 public.html -->
<div class="public-head">
		<p><a href="">首页</a></p>
		<p><a href="">数字中国</a></p>
		<p><a href="">云服务</a></p>
		<p><a href="">企业营销</a></p>
		<p><a href="">企业办公</a></p>
		<p><a href="">知识产权</a></p>
		<p><a href="">招商加盟</a></p>
</div>

 2.CSS代码封装

css的样式在一个页面有多个一样的css样式,不需要去声明多个class或者id名字,只需要使用的元素声明一个class名字就可以了,在css里也只需要使用这个class,写一遍就可以了

一些在好几个css常用的css样式,就可以在使用一个css文件封装起来,比如页面背景色,弹出窗的样式,分页的样式,这些都可以通过一个通用的css文件封装起来方便使用

下面的是封装的css通用的代码,这里面封装了背景色和弹出窗的样式

具体怎么在页面使用,可以通过link标签引入这些css样式,方便我们的html里面使用,引用的方法在最下面

3.JS代码封装

3.1函数的封装

     3.1.1函数也是一个对象

     3.1.2函数中可以封装一些功能,在需要的使用可以执行这些功能

     3.1.3函数中也可以保存一些代码在需要的时候调用

     3.1.14使用typeof检查一个函数对象时,回返回function

3.2使用js文件封装同样的js代码,比如下面分页功能的代码

//一页有多少条数据
let num = 10;
//页码下标
let page_index = 0;
//总页数
let total_page;
// 页数渲染
function pagenumber(data) {
	let pagination = ``;
	pagination += `<div class="data-count">共 ${data.length} 条</div>`;
	pagination += `<select id="show" value="${num}" onchange="selects()">
				<option ${num == 10 ? 'selected' : ''} class="option" value="10">10条/页</option>
				<option ${num == 20 ? 'selected' : ''} class="option" value="20">20条/页</option>
				<option ${num == 50 ? 'selected' : ''} class="option" value="50">50条/页</option>
	        </select>  
	        <div class="paging_Previous" id="up" onclick="back_page()">
				<img src="./img/lefte.png" alt="" />
	        </div>`;
	// 获取总页数
	total_page = Math.ceil(data.length / num);

	// 总页数小于6,执行if的内容,大于6执行else
	if (total_page < 6) {
		for (let j = 0; j < total_page; j++) {
			pagination +=
				`<div class="paging_num" onclick="sort(${j})" ${page_index == j ? 'style="color:#0c66ff;"' : '""'}>${j + 1}</div>`;
		}
	} else {
		// 判断显示哪几页的页数
		 if (page_index > total_page - 4) {
			pagination +=
				`<div class="paging_num" onclick="sort(${0})" ${page_index == 0 ? 'style="color:#0c66ff;"' : '""'}>1</div>...`;
		} else if (page_index >=3){
			page_num = page_index - 2;
			pagination +=
				`<div class="paging_num" onclick="sort(${0})" ${page_index == 0 ? 'style="color:#0c66ff;"' : '""'}>1</div>...`;
		}
		// 循环页数
		for (let j = page_index - 2 < 0 ? 0 : (page_index + 2 > total_page - 1 ? page_index = total_page - 3 :
				page_index - 2); j < page_index + 2; j++) {
			pagination +=
				`<div class="paging_num" onclick="sort(${j})" ${page_index == j ? 'style="color:#0c66ff;"' : '""'}>${j + 1}</div>`;
		}

		// 用来判断是否添加省略号
		if (page_index < 3) {
			sti +=
				`...<div class="paging_num" onclick="sort(${total_page - 1})" ${page_index == total_page - 1 ? 'style="color:#0c66ff;";' : '"'}>${total_page}</div>`;
		} else if (page_index <= total_page - 4) {
			sti +=
				`...<div class="paging_num" onclick="sort(${total_page - 1})" ${page_index == total_page - 1 ? 'style="color:#0c66ff;";' : '"'}>${total_page}</div>`;
		}
	}

	pagination += `<div class="paging_Previous" id="bottom" onclick="next_page()">
	<img src="./img/righte.png" alt="" />
	</div>`;
	pagination +=
		`<div>前往<input type="text" class="inputs" placeholder="请输入页码" onkeyup="if(event.keyCode==13){search()}">页</div>`;
	$('#paging').html(pagination);
}

// 分页内容搜索
function search() {
	// 获取输入框的值
	let input = document.querySelector('.inputs').value;

	// 转换输入值为整数
	let pageNumber = parseInt(input, 10);

	// 验证输入值
	if (isNaN(pageNumber) || pageNumber < 1 || pageNumber > total_page) {
		// 弹出警告提示
		// 显示超出限制的提示
		tooltip.innerHTML = `超出页面范围`;
		//修改弹出窗的样式
		tooltip.style = "display:block;";
		$('.inputs').val('');
		setTimeout(function() {
			tooltip.style = "display:none";
		}, 2000);
	} else {
		// 更新当前页码
		page_index = pageNumber - 1;
		// 调用 apply 函数更新分页内容
		applys(res);
	}
}

//下一页
function next_page() {
	//k小于总页数-1
	if (page_index < total_page - 1) {
		//每次点击加1
		page_index++;
	}
	//调用渲染函数
	applys(res);
}

//上一页
function back_page() {
	//k大于0
	if (page_index > 0) {
		//每次点击-1
		page_index--;
		//调用渲染
		applys(res);
	}
}

// 改变每页渲染的数据条数
function selects() {
	// 获取下拉框的value 
	let value = $('#show').val();
	// 选中大家下拉框的选项
	$("#mySelect").val(value);
	// 让每页的数据等于下拉框的value值
	num = value;
	// 重新计算总页数
	total_page = Math.ceil(res.length / num);
	if (page_index > total_page - 1) {
		page_index = total_page - 1;
	}
	// 调用渲染函数
	applys(datas);
}

// 点击切换页面数据事件
function sort(j) {
	// 让页数调用点击的页数
	page_index = j;
	// 调用渲染函数
	applys(datas);
}

 它是通过重新封装一个js代码在页面中使用

比如分页的功能,加减功能都可以封装起来,获取接口域名,一些判断,也方便如果代码出问题了,好修改,然后再html里面直接引入js就可以使用了

4.html,css,js引入公共的代码的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 这是引入css公告样式的方法 -->
		<link rel="stylesheet" href="./tooltip.css" />
	</head>
	<body>
		<!-- 这是通过iframe引入html结构 -->
		<div id="page1">
			<iframe align="center" width="100%" height="170" src="page/Page_1.html" frameborder="no" border="0"
				marginwidth="0" marginheight="0" scrolling="no"></iframe>
		</div>
		<div id="page2">
			<iframe align="center" width="100%" height="170" src="page/Page_2.html" frameborder="no" border="0"
				marginwidth="0" marginheight="0" scrolling="no"></iframe>
		</div>
		<!-- 这是引入js的公共代码的方法 -->
		<script src="pagination.js"></script>
	</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2265403.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

acme ssl证书自动续签 nginx

参考 github 官方操作 &#xff0c;acme操作说明 说下我的操作 安装 acme.sh curl https://get.acme.sh | sh source ~/.bashrc 2.注册 acme.sh --register-account -m 123qq.com 如果你在配置 acme.sh 时选择了其他 CA&#xff08;如 Let’s Encrypt&#xff09;&#xff…

【专题】2024抖音电商母婴行业分析报告汇总PDF洞察(附原数据表)

原文链接&#xff1a;https://tecdat.cn/?p38651 在数字化浪潮的席卷下&#xff0c;抖音电商母婴行业正经历着深刻变革。当下&#xff0c;年轻一代父母崛起&#xff0c;特别是 24 至 30 岁以及 18 至 23 岁的群体成为抖音母婴行业兴趣人群的主力军。他们带来全新育儿理念&…

设计模式之 abstract factory

适用场景 一个系统要独立于它的产品的创建、组合和表示时。一个系统要由多个产品系列中的一个来配置时。当你要强调一系列相关的产品对象的设计以便进行联合使用时。当你提供一个产品类库&#xff0c;而只想显示它们的接口而不是实现时 架构演示 首先client这个东西可以接触到…

UE5仿漫威争锋灵蝶冲刺技能

这两天玩了一下漫威争锋Marvel Rivals&#xff0c;发现是UE5做的&#xff0c;对里面一些角色技能挺感兴趣的&#xff0c;想简单复刻一下技能功能&#xff0c;顺便复习一下学过的知识 首先把摄像机设置调整一下 CameraBoom里搜索lag 把摄像机延迟关掉 &#xff0c;这样摄像机就…

尼伽OLED赋能中国移动,打造移动AI数字人透明显示屏

随着人工智能和显示技术的不断进步&#xff0c;中国移动紧跟科技潮流&#xff0c;将移动AI数字人技术与透明屏完美结合&#xff0c;为用户带来了前所未有的智能交互体验。基于中国移动九天大模型生成的数字人小天&#xff0c;便是这一创新技术的典型代表。它不仅能够实现定点播…

goview——vue3+vite——数据大屏配置系统

低代码数据大屏配置系统&#xff1a; 数据来源是可以动态api配置的&#xff1a; 配置上面的api接口后&#xff0c;在数据过滤中进行数据格式的转化。 以上内容&#xff0c;来源于https://gitee.com/dromara/go-view/tree/master-fetch/ 后端代码如下&#xff0c;需要更改…

GitLab安装|备份数据|迁移数据及使用教程

作者&#xff1a; 宋发元 最后更新时间&#xff1a;2024-12-24 GitLab安装及使用教程 官方教程 https://docs.gitlab.com/ee/install/docker.html Docker安装GitLab 宿主机创建容器持久化目录卷 mkdir -p /docker/gitlab/{config,data,logs}拉取GitLab镜像 docker pull gi…

JavaWeb Servlet的反射优化、Dispatcher优化、视图(重定向)优化、方法参数值获取优化

目录 1. 背景2. 实现2.1 pom.xml2.2 FruitController.java2.3 DispatcherServlet.java2.4 applicationContext.xml 3. 测试 1. 背景 前面我们做了Servlet的一个案例。但是存在很多问题&#xff0c;现在我们要做优化&#xff0c;优化的步骤如下&#xff1a; 每个Fruit请求都需…

selenium执行js

JS知识 获取元素 document.getElement 移除属性&#xff1a;removeAttribute("xx") 窗口移动&#xff1a;window.scrollTo(0, document.body.scrollHeight)方法 drivier.execute_script(js)场景&#xff1a; 日期选择框&#xff0c;不能输入&#xff0c;只能设置…

《信管通低代码信息管理系统开发平台》Linux环境安装说明

1 简介 信管通低代码信息管理系统应用平台提供多环境软件产品开发服务&#xff0c;包括单机、局域网和互联网。我们专注于适用国产硬件和操作系统应用软件开发应用。为事业单位和企业提供行业软件定制开发&#xff0c;满足其独特需求。无论是简单的应用还是复杂的系统&#xff…

static 和const的作用面试常问

点击上方"蓝字"关注我们 01、static 关键字 >>> 1. 局部变量 作用:将变量的生命周期延续到程序的整个运行期间,而不仅仅是它所在的函数调用期间。 void func() {static int count = 0; // 只会初始化一次 count++; printf("%d\n", count)…

VS2022 中的 /MT /MTd /MD /MDd 选项

我们有时编译时,需要配置这个 运行库,指定C/C++运行时库的链接方式。 如下图 那么这些选项的含义是什么? /MT:静态链接多线程库 /MT选项代表“Multi-threaded Static”,即多线程静态库。选择此选项时,编译器会从运行时库中选择多线程静态连接库来解释程序中的代码,…

掌握 Ansys ACP 中的参考方向:简化复杂的复合材料设计

概括 在复合材料分析领域&#xff0c;精度至关重要&#xff0c;尤其是在定义纤维方向和铺层时。Ansys ACP&#xff08;Ansys Composite PrepPost&#xff09;提供了强大的工具来建立参考方向&#xff0c;这是实现精确结构模拟的关键步骤。在本博客中&#xff0c;我们将揭开在 …

金仓数据库安装-Kingbase v9-centos

在很多年前有个项目用的金仓数据库&#xff0c;上线稳定后就没在这个项目了&#xff0c;只有公司的开发环境还在维护&#xff0c;已经好多年没有安装过了&#xff0c;重温一下金仓数据库安装&#xff0c;体验一下最新版本&#xff0c;也做一个新版本的试验环境&#xff1b; 一、…

什么是 DevOps 自动化?

DevOps 自动化是一种现代软件开发方法&#xff0c;它使用工具和流程来自动化任务并简化工作流程。它将开发人员、IT 运营和安全团队聚集在一起&#xff0c;帮助他们有效协作并交付可靠的软件。借助 DevOps 自动化&#xff0c;组织能够处理重复性任务、优化流程并更快地将应用程…

Windows中运行Linux(WSL)

Windows Subsystem for Linux&#xff08;WSL&#xff09;是一个在Windows 10和更高版本上运行Linux二进制可执行文件&#xff08;ELF格式&#xff09;的兼容层。它允许你在Windows上直接运行Linux环境&#xff0c;包括大多数命令行工具、实用程序和应用程序&#xff0c;无需修…

【Qt】对象树(生命周期管理)和字符集(cout打印乱码问题)

1.对象树 对象树统一管理窗口内部控件的生命周期&#xff0c;本质是一颗多叉树。 new对象会加入到对象树中&#xff0c;窗口关闭/释放时统一销毁&#xff0c;不需要手动delete。 如果在栈上定义label对象&#xff0c;生命周期随构造函数&#xff0c;无法正常显示控件。 1.1演…

Vue3项目中引入TailwindCSS(图文详情)

Vue3项目中引入TailwindCSS&#xff08;图文详细&#xff09; Tailwind CSS 是一个实用工具优先的 CSS 框架&#xff0c;提供丰富的低级类&#xff08;如 text-center、bg-blue-500&#xff09;&#xff0c;允许开发者通过组合这些类快速构建自定义设计&#xff0c;而无需编写…

web-密码安全口令

目录 一、密码安全概述 二、密码安全现状 三、破解方式 四、暴力破解 五、字典破解 六、密码字典 学习心得&#xff1a; 一、密码安全概述 现在很多地方都是以用户名&#xff08;账号&#xff09;和口令&#xff08;密码&#xff09;作为鉴权的方式&#xff0c;口令&am…

YOLO11改进-模块-引入空间自适应特征调制网络SAFMN(Spatial Adaptive Feature Modulation Network)

尽管基于深度学习的解决方案在图像超分辨率&#xff08;SR&#xff09;中取得了令人瞩目的重建性能&#xff0c;但这些模型通常较大且架构复杂&#xff0c;使其与许多具有计算和内存限制的低功耗设备不兼容。为了克服这些挑战&#xff0c;我们提出了一种用于高效 SR 设计的空间…