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 calc()会计算属性详解
Feb 27 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
基于php-fpm 参数的深入理解
2013/06/03 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
jQuery之ajax删除详解
2014/02/27 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
python生成随机mac地址的方法
2015/03/16 Python
Python调用C语言开发的共享库方法实例
2015/03/18 Python
Unicode和Python的中文处理
2017/03/19 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
python的dict判断key是否存在的方法
2020/12/09 Python
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
商业项目策划方案
2014/06/05 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
全陪导游词开场白
2015/05/29 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python