网页版通讯录

OECOM

修改于 2020-08-24 16:43:53

9.2K2

修改于 2020-08-24 16:43:53

文章被收录于专栏：OECOMOECOM

目前移动端的应用越来越火了，其中以网页为载体的应用也是层出不穷。今天我给大家介绍一个用网页来实现制作通讯录的方法。

这个通讯录适用于移动端（可拨打电话）。由于只做的是前端展示页面，只提供用户信息展示，通过手机号或姓名搜索相关联系人，分组管理。没有设置增加功能，这个功能非常简单有兴趣的用户可以自己尝试写一下。填入数据库即可。来看一下这个通讯录的截图

再来看一下代码

<!DOCTYPE html>
<html>
<head>
<title>通讯录</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta content="telephone=no" name="format-detection" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<script type='text/javascript' src="js/jquery.min.js"></script>
	<script type='text/javascript' src="js/tongxunlu.js"></script>
	<link rel="stylesheet" type="text/css" href="css/tongxunlu.css">
</head>
<body>
<div id="dinglan">
	  <input id="sousuo" type="search" placeholder="请输入人名" value="" onkeyup="findEach()" />   
</div>
 <div>
	<!-- 分组-->
	<div class="fenzu">
		<p class="biaoti" onclick="showchengyuan(this)"><span class="kaiguan neiliankuai">＞</span><span class="kaiguan none">∨</span>软件事业部<span style="float:right;">(<span>5</span><span>)</span></span></p>
		<div class="chengyuan">
			<ul>
				<li class="geren" >
					<img class="touxiang" src="img/moren.jpg" />
					<span class="chengyuanming">张三</span>
					<span class="zhiwei">架构师</span>
					<span class="cikaiguan" onclick="showphone(this)">＞</span>
					<span class="none cikaiguan" onclick="showphone(this)">∨</span>
					<span class="phone"><a href="tel:18330115142">18330115142</a></span>
				</li>
				<li class="geren">
					<img class="touxiang" src="img/moren.jpg" />
					<span class="chengyuanming">李四</span>
					<span class="zhiwei">架构师</span>
					<span class="cikaiguan" onclick="showphone(this)">＞</span>
					<span class="none cikaiguan" onclick="showphone(this)">∨</span>
					<span class="phone"><a href="tel:18265963269">18265963269</a></span>
				</li>
			</ul>
		</div>
	</div>
	<div class="fenzu">
		<p class="biaoti" onclick="showchengyuan(this)"><span class="kaiguan neiliankuai">＞</span><span class="kaiguan none">∨</span>综合部<span style="float:right;">(<span>5</span><span>)</span></span></p>
		<div class="chengyuan">
			<ul>
				<li class="geren">
					<img class="touxiang" src="img/moren.jpg" />
					<span class="chengyuanming">王五</span>
					<span class="zhiwei">架构师</span>
					<span class="cikaiguan" onclick="showphone(this)">＞</span>
					<span class="none cikaiguan" onclick="showphone(this)">∨</span>
					<span class="phone"><a href="tel:15933740783">15933740783</a></span>	
				</li>
				<li class="geren">
					<img class="touxiang" src="img/moren.jpg" />
					<span class="chengyuanming">马六</span>
					<span class="zhiwei">架构师</span>
					<span class="cikaiguan" onclick="showphone(this)">＞</span>
					<span class="none cikaiguan" onclick="showphone(this)">∨</span>
					<span class="phone"><a href="tel:18963263258">18963263258</a></span>
				</li>
			</ul>
		</div>
	</div>
</div> 
</body>
</html>

这个代码为前端html页面代码，由于没有连接数据库，联系人数据暂时设置为固定的，此页面如果和后台程序联合起来就可以作为一套完整的通讯录程序。具体的css样式和js代码可以点击下方的下载。

原文链接网页版通讯录

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2015-10-30，如有侵权请联系 cloudcommunity@tencent.com 删除

数据库