信息发布软件,b2b软件,广告发布软件

 找回密码
 立即注册
搜索
查看: 6464|回复: 13
打印 上一主题 下一主题

[『JavaScript图文教程』] 网页的振动触觉效果就靠这段JS代码了

[复制链接]

1916

主题

1926

帖子

1万

积分

积分
11218
跳转到指定楼层
宣传软件楼主
发表于 2017-6-4 22:17:13 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式

软件教程首图:

软件教程分类:Java 图文教程 

软件图文教程视频教程分类:软件图文教程 

软件教程难易程度:软件中级教程 

软件教程发布日期:2017-06-04

软件教程关键字:网页的振动触觉效果就靠这段JS代码了

① 本信息收集于网络,如有不对的地方欢迎联系我纠正!
② 本信息免费收录,不存在价格的问题!
③ 如果您的网站也想这样出现在这里,请您加好友情链接,我当天会审核通过!

④友情链接关键字:软件定制网站 网址:http://www.postbbs.com

软件教程详细描述
本帖最后由 群发软件 于 2017-6-4 22:18 编辑

个功能真的很神奇,但是前提是你的手机支持这个API,否则它的美,你无法亲身体会。

HTML

<div class="shock">        按我手机会震动 </div>
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

CSS

.shock{       font-size: 15px;       font-weight: bold;       color: red;   }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

JS

//Vibration接口用于在浏览器中发出命令,使得设备振动。   function vibration(){       navigator.vibrate = navigator.vibrate               || navigator.webkitVibrate               || navigator.mozVibrate               || navigator.msVibrate;       if (navigator.vibrate) {           // 支持           console.log("支持设备震动!");       }     $(".shock").click(function(){         alert("1111");         navigator.vibrate([500, 300, 400,300]);     });   }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

这个小功能,首先判断是否支持设备震动,如果震动当点击“” 按我手机会震动“”,手机就会自己动起来了。

navigator.vibrate([500, 300, 400,300]);这句话有必要解释一下,中括号里面的值标示“”[震动时间,停止时间,震动时间,停止时间………..]“”。没有错就是这种规律,简单明了。



一种把人吓一跳的感觉。实现方法是,把下面的JavaScript代码加入到<body>与</body>之间:

  <script language="JavaScript">

  function surfto(form) {

  var myindex=form.select1.selectedIndex

  if (form.select1.options[myindex].value != null) {

  parent.main.location.href=form.select1.options[myindex].value;

  } }

  </script>//这段JS代码意为当前页面的浏览器地震//

  <script language="JavaScript1.2">

  function shake(n) {

  if (window.top.moveBy) {

  for (i = 10; i>0; i--) {

  for (j = n; j>0; j--) {

  window.top.moveBy(0,i);

  window.top.moveBy(i,0);

  window.top.moveBy(0,-i);

  window.top.moveBy(-i,0);

  } } }

  alert("呀~~地震啦!没~~吓坏吧?^_*"); //这里设定地震后弹出的嬉戏性文字(据需随意)//

  }

  </script>

  <script language="JavaScript">

  <!--

  function moyamoya(htmlfile) {

  parent.main.location.href=htmlfile;

  }

  </script>

  <a href="#">点我看看呀~~:-)</a>

  //其中,onclick="shake(10)"中的数字表示震动的次数;href="#"是设定地震后回到本面//

  呵呵…我说,感觉怎么样呀各位?赶紧地行动吧你!^_^

现代浏览器里提供的新的API越来越倾向于移动手机应用,而不是传统的桌面应用,比如 javascript地理位置信息API 。另外一个只针对手机应用的JavaScript API就是 振动(Vibration) API 。很明显,这个API就是允许mobile程序员使用JavaScript调用手机的振动功能,并且能设定振动的方式和时长。
网页的振动触觉效果就靠这段JS代码了 b2b软件

判断浏览器对振动API的支持情况
一个好的习惯就是在使用之前要检查一下当前你的应用环境、浏览器是否支持振动API。下面就是检测的方法:

复制代码代码如下:

// Standards ftw!
var supportsVibrate = "vibrate" in navigator;


在 window.navigator 对象里就只有一个关于振动的API: vibrate 。
振动API基础应用
这个 navigator.vibrate 函数可以接受一个数字参数,也可以接受一个数字数组,当使用数组参数时,奇数位的数值是震动秒数,偶数位为等待秒数。
// 振动1秒
复制代码代码如下:

navigator.vibrate(1000);


// 振动多次
// 参数分别是震动3秒,等待2秒,然后振动1秒
复制代码代码如下:

navigator.vibrate([3000, 2000, 1000]);


如果想停止震动,你只需要向 navigator.vibrate 方法里传入0,或一个空数组:
// 停止振动
复制代码代码如下:

navigator.vibrate(0);
navigator.vibrate([]);


需要提醒的是,对 navigator.vibrate 方法的调用并不会引起手机循环振动;当参数是一个数字时,振动之后发生一次,然后就停止下来。当参数是数组时,震动会按数组里的值震动,然后就停止振动。
持续震动
我们可以简单的使用 setInterval 和 clearInterval 方法产生让手机持续震动的效果:
var vibrateInterval;// Starts vibration at passed in levelfunction startVibrate(duration) {navigator.vibrate(duration);}// Stops vibrationfunction stopVibrate() {// Clear interval and stop persistent vibrating if(vibrateInterval) clearInterval(vibrateInterval);navigator.vibrate(0);}// Start persistent vibration at given duration and interval// Assumes a number value is givenfunction startPeristentVibrate(duration, interval) {vibrateInterval = setInterval(function() {startVibrate(duration);}, interval);}
上面的这段代码只是针对振动参数是一个数字的情况,如果参数是数组,你还需要计算一下它的总共持续时间,然后根据它的特征来进行循环。

使用振动(Vibration) API的场景
这个API显然是针对移动手机设备的。当开发手机WEB移动应用时,它是一个很好的警示工具,当在开发Web游戏或多媒体应用时,这个振动功能更是不可或缺的好技术。比如说,当用户在用一个手机玩你的WEB游戏时,当游戏中发生爆炸,而你让手机也跟随着振动,是不是一种很出色的用户体验?
你对这个JavaScript振动API的感觉如何?是认为它会很快流行起来?还是没有多大用处?

unto效果是做出来的JS代码也能让您实现透明可爱的效果的next软件群发51新商企网信息发布软件
回复

使用道具 举报

1

主题

2204

帖子

565

积分

积分
565
信息发布软件沙发
发表于 2017-6-6 19:03:25 | 只看该作者
店家服务真的很好!

回复 支持 反对

使用道具 举报

0

主题

660

帖子

654

积分

积分
654
推广工具板凳
发表于 2017-6-7 17:22:38 | 只看该作者
简单大方,速度也很给力,非常不错.

回复 支持 反对

使用道具 举报

0

主题

652

帖子

686

积分

积分
686
软件定制开发地板
发表于 2017-6-10 12:21:16 | 只看该作者
,整体满意,好评

回复 支持 反对

使用道具 举报

20

主题

2263

帖子

4131

积分

积分
4131
5#定制软件#
发表于 2017-6-13 01:54:09 | 只看该作者
晚,价格合适,功能齐全,尤其是技术客服服务周到,花很少的钱做很大的事,合作愉快,希望以后更好合作

回复 支持 反对

使用道具 举报

1

主题

608

帖子

594

积分

积分
594
6#定制软件#
发表于 2017-6-14 04:42:51 | 只看该作者
术不错。。。整的巴适。。。

回复 支持 反对

使用道具 举报

0

主题

1012

帖子

1012

积分

积分
1012
7#定制软件#
发表于 2017-6-18 12:57:49 | 只看该作者
心不懂就问他就告诉也不嫌弃烦不给好评等啥呢必须好评太给力了好多客人都说我家店铺好看。从来没有碰到过

回复 支持 反对

使用道具 举报

0

主题

584

帖子

578

积分

积分
578
8#定制软件#
发表于 2017-6-21 22:57:11 | 只看该作者
,店家真有样,大爱!

回复 支持 反对

使用道具 举报

0

主题

583

帖子

575

积分

积分
575
9#定制软件#
发表于 2017-6-22 13:13:00 | 只看该作者
家服务态度绝对一流!

回复 支持 反对

使用道具 举报

0

主题

596

帖子

677

积分

积分
677
10#定制软件#
发表于 2017-6-22 22:03:57 | 只看该作者
简单大方,速度也很给力,非常不错.

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

相关导读
群发软件JavaScript语法小示例
JavaScript语法小示例
群发软件展示JavaScript各种语句标识符的实际应用
展示JavaScript各种语句标识符的实际应用
群发软件AIWROK条件语句实用示例智能活动推荐系统
AIWROK条件语句实用示例智能活动推荐系统
群发软件AIWROK软件示例数组方法实战应用
AIWROK软件示例数组方法实战应用
群发软件示例JavaScript的 try-catch-finally-throw用法
示例JavaScript的 try-catch-finally-throw用法
群发软件JavaScript 高级错误处理实战示例
JavaScript 高级错误处理实战示例
群发软件安卓脚本AIWROK软件示例JS函数高级用法
安卓脚本AIWROK软件示例JS函数高级用法
群发软件AIWROK环境JavaScript编码规范完整示例
AIWROK环境JavaScript编码规范完整示例
群发软件安卓脚本示例实时截图判断页面变化
安卓脚本示例实时截图判断页面变化
群发软件苹果脚本7种不同的OCR识别
苹果脚本7种不同的OCR识别
群发软件安卓脚本多变的function用法
安卓脚本多变的function用法
群发软件苹果脚本示例Config配置H5集成
苹果脚本示例Config配置H5集成
群发软件安卓脚本类型判断与Boolean对象综合示例
安卓脚本类型判断与Boolean对象综合示例
群发软件线程全局变量H5可视化控制台
线程全局变量H5可视化控制台
群发软件秒吐司快速显示和关闭的UI提示窗口
秒吐司快速显示和关闭的UI提示窗口
群发软件苹果脚本里H5 里的 window.at.callFun 示例
苹果脚本里H5 里的 window.at.callFun 示例
群发软件H5日志打印运行过程例子
H5日志打印运行过程例子
群发软件AIWROK软件字符串方法实用案例
AIWROK软件字符串方法实用案例
群发软件HID贝塞尔曲线运动控制器
HID贝塞尔曲线运动控制器
群发软件AIWROK苹果脚本sleep方法综合实战示例
AIWROK苹果脚本sleep方法综合实战示例
群发软件苹果脚本Line控件的多种创意用法和实际应用场景
苹果脚本Line控件的多种创意用法和实际应用场景
群发软件苹果脚本toast高级应用综合示例
苹果脚本toast高级应用综合示例
群发软件苹果智能OCR自动化助手
苹果智能OCR自动化助手
群发软件苹果脚本UI超快速点击示例
苹果脚本UI超快速点击示例
群发软件展示时间戳的各种复杂处理方法
展示时间戳的各种复杂处理方法
群发软件苹果脚本随机数实用示例
苹果脚本随机数实用示例
群发软件安卓手机脚本多种倒计时显示方式
安卓手机脚本多种倒计时显示方式
群发软件苹果脚本屏幕事件EVENT示例
苹果脚本屏幕事件EVENT示例
群发软件苹果脚本屏幕类screen例子
苹果脚本屏幕类screen例子
群发软件安卓手机config配置演示实列
安卓手机config配置演示实列
群发软件苹果脚本配置config小实例
苹果脚本配置config小实例 https://www.yuque.com/aiwork/dcvhmb/qolobpysdg0hvi2e
群发软件苹果脚本矩形类rect小实例
苹果脚本矩形类rect小实例
群发软件AIWROK安卓苹果平台设计的实用工具库
AIWROK安卓苹果平台设计的实用工具库
群发软件AIWROK软件Function导入方法实例演示
AIWROK软件Function导入方法实例演示
群发软件苹果脚本实例1项目project应用示例
苹果脚本实例1项目project应用示例
群发软件苹果脚本实例1剪贴板功能集成
苹果脚本实例1剪贴板功能集成
群发软件苹果iOS脚本Detect类系统性使用示例
苹果iOS脚本Detect类系统性使用示例
群发软件AIWROK苹果系统打印H5界面日志输出
AIWROK苹果系统打印H5界面日志输出
群发软件H5案例自动化看广告撸金币系统
H5案例自动化看广告撸金币系统
群发软件AIWROK苹果脚本H5任务执行小例子
AIWROK苹果脚本H5任务执行小例子
群发软件AIWROK软件苹果水平容器[Horizontal]小实例
AIWROK软件苹果水平容器[Horizontal]小实例
群发软件AIWROK苹果脚本实例1界面UI输入框类[Input]
AIWROK苹果脚本实例1界面UI输入框类
群发软件AIWROK软件苹果脚本案例1空白站位[Space]方法
AIWROK软件苹果脚本案例1空白站位[Space]方法
群发软件AIWROK软件苹查系统复选框用法
AIWROK软件苹查系统复选框用法
群发软件苹果AIWROK实例单选按钮组类[RadioButtonGroup]完整综合示例
苹果AIWROK实例单选按钮组类[RadioButtonGroup]完整综合示例
群发软件AIWROK软件苹果实例UI-垂直容器[Vertical]高级综合示例
AIWROK软件苹果实例UI-垂直容器[Vertical]高级综合示例
群发软件IOS苹果脚本View的完整功能实例
IOS苹果脚本View的完整功能实例
群发软件AIWROK苹果系统实例演示1标签类[Label]方法
AIWROK苹果系统实例演示1标签类[Label]方法
信息发布软件AIWROK软件苹果UI按钮Button方法示例
AIWROK软件苹果UI按钮Button方法示例
信息发布软件AIWROK软件苹果TAB界面视图示例
AIWROK软件苹果TAB界面视图示例
信息发布软件AIWROK苹果系统自带view视图简洁UI界面示例
AIWROK苹果系统自带view视图简洁UI界面示例
信息发布软件汇集HID安卓输入文字的方法和复制粘贴示例
汇集HID安卓输入文字的方法和复制粘贴示例
信息发布软件AIWROK软件找字与OCR方法汇总示例
AIWROK软件找字与OCR方法汇总示例
信息发布软件AIWROK软件找图方法汇总示例
AIWROK软件找图方法汇总示例
信息发布软件AIWROK软件滑动方法集合示例
AIWROK软件滑动方法集合示例
信息发布软件AIWROK软件安卓AIWROK汇集软件点击
AIWROK软件安卓AIWROK汇集软件点击
信息发布软件苹果系统点击方法综合示例
苹果系统点击方法综合示例
信息发布软件AIWROK苹果系统找图方法完整示例集合
AIWROK苹果系统找图方法完整示例集合
信息发布软件苹果系统找图方法完整示例集合
苹果系统找图方法完整示例集合
信息发布软件苹果IOS系统找字OCR方法例子
苹果IOS系统找字OCR方法例子
信息发布软件AIWORK软件数组高级示例
AIWORK软件数组高级示例
信息发布软件AIWROK软件运算符封装库示例
AIWROK软件运算符封装库示例
信息发布软件AIWROK软件语法运行小示例
AIWROK软件语法运行小示例
信息发布软件AIWROK软件JS循环小示例
AIWROK软件JS循环小示例
信息发布软件AIWROK软件H5网页被主脚本获取值用法
AIWROK软件H5网页被主脚本获取值用法

QQ|( 京ICP备09078825号 )

本网站信息发布软件,是可以发布论坛,发送信息到各大博客,各大b2b软件自动发布,好不夸张的说:只要手工能发在电脑打开IE能发的网站,用这个宣传软件就可以仿制动作,进行推送发到您想发送的B2B网站或是信息发布平台上,不管是后台,还是前台,都可以进行最方便的广告发布,这个广告发布软件,可以按月购买,还可以试用软件,对网站的验证码也可以完全自动对信息发布,让客户自动找上门,使企业轻松实现b2b发布,这个信息发布软件,均是本站原创正版开发,拥有正版的血统,想要新功能,欢迎提意见给我,一好的分类信息群发软件在手,舍我其谁。QQ896757558

GMT+8, 2026-5-13 21:06 , Processed in 1.957939 second(s), 56 queries .

宣传软件--信息发布软件--b2b软件广告发布软件

快速回复 返回顶部 返回列表