HTML5调用手机发短信和打电话功能


Posted in HTML / CSS onApril 29, 2020

前言

本来感觉用H5写调用电话拨号功能和发送短信功能会很不好写,后来通过实践得出,其实很简单的。
首先简单介绍一下业务功能,就是显示通讯录中的人员用户信息,然后分别点击相应的按钮来发送短信和拨通电话

HTML5调用手机发短信和打电话功能

正文

来看看HTML的关键代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>公司通讯录</title>
		//一定要加的引用
		<meta name="apple-mobile-web-app-capable" content="yes">
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: #ffffff;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #000000;font-size: 25px;"></a>
			<h1 class="mui-title">个人信息</h1>
		</header>
		<div class="mui-page-content" >
				<div class="mui-scroll" style="background-color: #FFFFFF;">
					<div class="mui-button-row" style="margin-bottom: 40%;margin-top: 10%;">
					//发消息的关键代码href 个id 会在js中写出来
						<a href="#" id="urls" > 
							<i class="iconfont icon-Group- " style="font-size: 18px;"></i>  发消息  </a>
						//拨号的关键代码href 个id 会在js中写出来
						<a href="#" id="url" > 
						<i class="iconfont icon-dianhua iconback " style="font-size: 18px;"></i>  打电话
				</div>
			</div>
		</div>
	</body>
</html>
//拨号的写法
			document.getElementById("url").href = 'tel:' +具体的电话号码;
			//发短信的写法
			document.getElementById("urls").href = 'sms:' + 具体的电话号码;

代码精炼

<head>里面加上:

<meta name="format-detection" content="telephone=yes"/>

需要拨打电话的地方:

<a href="tel:400-0000-688">400-0000-688</a>

发短信:

<a href="sms:18688888888">发短信</a>

结束

其实好多功能都不是特别难,只是不熟悉,软件开发就是不断的熟悉的过程。

到此这篇关于HTML5调用手机发短信和打电话功能的文章就介绍到这了,更多相关html5 发短信打电话内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 #HTML / CSS
HTML5中的网络存储实现方式
Apr 28 #HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 #HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 #HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 #HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 #HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 #HTML / CSS
You might like
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
js日历功能对象
2012/01/12 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python opencv进行图像拼接
2020/03/27 Python
详解python logging日志传输
2020/07/01 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
超市总经理岗位职责
2014/02/02 职场文书
临床专业自荐信
2014/06/22 职场文书
连锁超市项目计划书
2014/09/15 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
公务员政审个人总结
2015/02/12 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
房屋质量投诉书
2015/07/02 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
python中的装饰器该如何使用
2021/06/18 Python