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实现跳动的动画效果
Sep 12 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 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图片上传存储源码并且可以预览
2011/08/26 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
PHP自定义多进制的方法
2016/11/03 PHP
菜鸟javascript基础资料整理2
2010/12/06 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
使用python实现个性化词云的方法
2017/06/16 Python
Java及python正则表达式详解
2017/12/27 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
Python-split()函数实例用法讲解
2020/12/18 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
优秀企业获奖感言
2014/02/01 职场文书
学校节能减排方案
2014/06/13 职场文书
小学班级管理心得体会
2016/01/07 职场文书