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实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 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
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
wordpress之wp-settings.php
2007/08/17 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php生成html文件方法总结
2014/12/01 PHP
百度地图API使用方法详解
2015/08/25 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
也说JavaScript中String类的replace函数
2011/09/22 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
椰子猫砂:CatSpot
2018/08/27 全球购物
餐饮主管岗位职责
2013/12/10 职场文书
秋季运动会稿件
2014/01/30 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
大学专科自荐信
2014/06/17 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
教师求职自荐信
2015/03/26 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
MySQL分布式恢复进阶
2022/07/23 MySQL