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

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

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

[复制链接]

1868

主题

1878

帖子

1万

积分

积分
10928
跳转到指定楼层
宣传软件楼主
发表于 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 | 只看该作者
简单大方,速度也很给力,非常不错.

回复 支持 反对

使用道具 举报

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

本版积分规则

相关导读
信息发布软件AIWROK软件Zip 高级操作复杂示例
AIWROK软件Zip 高级操作复杂示例
信息发布软件AIWROK软件txt_文件读写方法小结
AIWROK软件txt_文件读写方法小结
信息发布软件AIWROK软件file文件操作方法小结
AIWROK软件file文件操作方法小结
信息发布软件AIWORK软件配置读写H5演示配套脚本
AIWORK软件配置读写H5演示配套脚本
信息发布软件AIWROK配置读写功能演示示例
AIWROK配置读写功能演示示例
信息发布软件AIWROK截图缓存工具
AIWROK截图缓存工具
信息发布软件AIWROK线程许可证工具
AIWROK线程许可证工具
信息发布软件整理了AIWROK环境下常用的Date对象和sleep对象方法
整理了AIWROK环境下常用的Date对象和sleep对象方法
信息发布软件FastUI界面普通用法
FastUI界面普通用法
信息发布软件FastUI界面类[window]方法小结
FastUI界面类[window]方法小结 方法 1:close(关闭指定窗口)方法 2:closeAll(关闭所有窗口)方法 3:loadUI(加载 UI 界面)方法 4:onClose(监听窗口关闭事件)方法 5:onLoad(监听窗口加载事件)方法 6:setFull(设置窗口全屏)方法 7:setHeight(设置窗口高度)方法 8:setHidden(隐藏窗口)方法 9:setLeft(设置窗口 X 轴坐标)方法 10:setTop(设置窗口 Y 轴坐标)方法 11:setVisable(显示隐藏的窗口)方
信息发布软件AIWROK软件按钮监听UI界面与事件监听功能演示
AIWROK软件按钮监听UI界面与事件监听功能演示.
信息发布软件AWIROK软件多选[uiCheckBox]方法小结
AWIROK软件多选方法小结 方法一:findByID 加载多选控件方法二:getAllChecked 获取所有选中项方法三:getAllSelect 获取所有选项方法四:getChecked 获取某个选项是否选中方法五:setChecked 设置某个选项是否选中方法六:setCheckeds 设置多个选项是否选中方法七:setHeight 设置高度
信息发布软件AIWROK日志演示开启日志显示 → 放大 → 关闭代码
AIWROK日志演示开启日志显示 → 放大 → 关闭代码
信息发布软件&#127983;AIWROK数组方法高级应用案例
🏯AIWROK数组方法高级应用案例
信息发布软件AIWROK软件日志悬浮窗简化版自动切换位置
AIWROK软件日志悬浮窗简化版自动切换位置
信息发布软件AIWROK软件String实例演示
AIWROK软件String实例演示
信息发布软件AIWROK软件S内置String类[String]方法小结
AIWROK软件S内置String类[String]方法小结 方法 1:charAt[/backcolor]方法 2:charCodeAt[/backcolor]方法 3:indexOf[/backcolor]方法 4:lastIndexOf[/backcolor]方法 5:length[/backcolor]方法 6:match[/backcolor]方法 7:replace[/backcolor]方法 8:replaceAll[/backcolor]方法 9:split[/backcolor]方法 10:startsWith[/backcolor]方法 11:substr[/backcolor]方法 12:substring[/backcolor]方法 13:trim[/backcol
信息发布软件AIWROK软件完整的WebSocket客户端示例
这段代码是一个完整的WebSocket客户端示例,用于连接到指定的WebSocket服务器并处理各种事件。具体来说,代码的作用如下: 定义服务器地址:首先定义了一个服务器的IP地址和端口号 var ip = "154.37.221.104:8886";。 创建WebSocket对象:尝试创建一个新的WebSocket对象 var ws = new WebSocket();。注意,这里的 new ws() 应该是 new WebSocket()。 添加事件监听器:代码中尝试为WebSocket对象添加事件监听器,但这里有一个错误。
信息发布软件AIWROK软件苹果系统中实现四种基本滑动操作
AIWROK软件苹果系统中实现四种基本滑动操作
信息发布软件hid的滑动没有百分比坐标滑动吗
hid的滑动没有百分比坐标滑动吗
信息发布软件单选控件[uiRadioButton]方法小结
单选控件方法小结 方法 1:加载单选控件[/backcolor]方法 2:获取选中项[/backcolor]方法 3:设置高度[/backcolor]方法 4:设置选中项[/backcolor]
信息发布软件AIWROK软件无障碍触摸操作示例:点击、左右滑动、上下滑动实例
AIWROK软件无障碍触摸操作示例:点击、左右滑动、上下滑动实例
信息发布软件AIWROK软件安卓随机工具应用函数生成
AIWROK软件安卓随机工具应用函数生成
信息发布软件用在AIWORK软件代码中的实用符号分类整理2
用在AIWORK软件代码中的实用符号分类整理2 软件IDE用Emoji符号分类整理(含用途说明)一、表情与情感1. 微笑 [*]😀 笑脸(基础开心反馈,用于操作成功后的友好提示) [*]😃 笑脸大眼睛(强化开心情绪,用于重要任务完成后的积极反馈) [*]😄 笑脸和微笑的眼睛(温和友好的状态,用于日常交互中的正向回应) [*]😁 带着微笑的眼睛(轻松愉悦的反馈,用于轻度成功或趣味操作) [*]
信息发布软件AIWROK软件图像二值化的各种方法和应用场景
AIWROK软件图像二值化的各种方法和应用场景
信息发布软件AIWROK软件找图区分页面变化和卡死状态
AIWROK软件找图区分页面变化和卡死状态
信息发布软件AIWROK苹果系统Map 数据管理[map]小结
AIWROK苹果系统Map 数据管理[map]小结 方法一:add(添加键值对)[/backcolor]方法二:delete(删除指定键值对)[/backcolor]方法三:clear(清空所有键值对)[/backcolor]方法四:get(根据键获取值)[/backcolor]方法五:getAllValue(获取所有值)[/backcolor]方法六:toString(转换为字符串)[/backcolor]完整示例:
信息发布软件AIWROK软件用图找图示例templateMat方法
AIWROK软件用图找图示例templateMat方法
信息发布软件苹果JS代码运行时[selfRunTime]小结
苹果JS代码运行时[selfRunTime]小结 方法一:stop 停止运行[/backcolor]方法二:runOnUIThread ui 线程中运行函数[/backcolor]
信息发布软件苹果系统专用H5创建一个绿色文件
苹果系统专用H5创建一个绿色文件
信息发布软件AIWROK软件技术分享苹果IOS系统获取外部IP
AIWROK软件技术分享苹果IOS系统获取外部IP
信息发布软件AIWROK软件安卓总结图像视觉处理[opencv]方法
AIWROK软件安卓总结图像视觉处理[opencv]方法 方法1:getcolorNum:获取区域颜色数量 方法2:gradientProcessing:计算梯度 方法3:invertColor:颜色翻转 方法4:openImg:开运算 方法5:removeSmallObjects:去杂点 方法7:shapeSplit:分隔提取 方法8:shapeSplitEx:cv 文件分隔提取 方法9:templateMatch:模板匹配 方法10:threshold:二值化 方法11:toGray:转灰度图 方法12:
信息发布软件AIWROK软件start.js简单H5直接调用
信息发布软件AIWROK苹果系统简单的UI界面分享一下
信息发布软件图像视觉处理[opencv]小结3
图像视觉处理[opencv]小结3 方法1:findImageOneSift:找图(SIFT 算法) 方法2:findImagesEx:cv 文件找图 方法3:findMultiColor:找色 方法4:findMultiColorEx:cv 文件多点找色 方法5:gaussianBlur:高斯滤波 方法6:getAllShap:获取所有 Shape 方法7:getContours:获取轮廓图
信息发布软件AIWROK软件图像视觉处理[opencv]小结2
AIWROK软件图像视觉处理[opencv]小结2 方法 1:coverageArea:图片抹除方法2:dilateImage:图像膨胀 方法3:drawRect:Shape 绘制 方法4:erodeImage:图像腐蚀 方法5:filtersEx:cv 文件滤镜 方法6:findImageOneKAZE:找图(KAZE 算法)
信息发布软件AIWORK软件图像视觉处理[opencv]小结1
AIWORK软件图像视觉处理[opencv]小结1// 1. HSV颜色变换:对图像进行HSV通道的颜色变换,可调整色相、饱和度、对比度// 参数说明:输入图像(Mat)、色相参数(int)、饱和度参数(int)、对比度参数(int)// 返回值:处理后的Mat图像function hsvTransform() { // 截取屏幕区域(432,768)大小、100质量的图像并转为Mat格式 var mat = screen.screenShot(432, 768, 100).getMat(); // 调用HSV变换:色相17、饱和度17、对比度17
信息发布软件浏览器H5方法小结
浏览器H5方法小结
信息发布软件AIWROK软件漂亮对接H5简单示例
AIWROK软件漂亮对接H5简单示例
信息发布软件AIWROK软件线程优先级示例
AIWROK软件线程优先级示例
信息发布软件AIWORK软件在屏幕底部显示实时日志可以移动
AIWORK软件在屏幕底部显示实时日志可以移动
信息发布软件安卓HID贝塞尔曲线手势操作示例
安卓HID贝塞尔曲线手势操作示例
信息发布软件安卓端与H5页面交互的完整实现
安卓端与H5页面交互的完整实现
信息发布软件苹果系统里如何使用OCR进行文本识别并执行点击操作
苹果系统里如何使用OCR进行文本识别并执行点击操作
信息发布软件AIWROK软件列表控件 [uiList] 实例演示
AIWROK软件列表控件 实例演示
信息发布软件安卓列表控件 [uiList] 方法小结
安卓列表控件 方法小结 方法 1:add方法 2:addArray方法 3:clear方法 4:delete方法 5:execSQL方法 6:exportData方法 7:exportTxt方法 8:findByID方法 9:getColumnCount方法 10:getColumnIndex方法 11:getColumnName方法 12:getColumnNames方法 13:getCount方法 14:getCursorSetp方法 15:getPosition方法 16:getString方法 17:getStringl方法 18:importData方法 19:isLast方法 20:move方法 21:moveNext方法
信息发布软件安卓版AIWROK软件APP操作类小结合集
安卓版AIWROK软件APP操作类小结合集 方法 1:代理模式获取当前 activity 地址[/backcolor]方法 2:getAllApp 获取所有 app[/backcolor]方法 3:getAppName 获取 APP 名字[/backcolor]方法 4:getCurrentActivity 无障碍获取当前 activity 地址[/backcolor]方法 5:getLocalAppName 获取自己 APP 名字(AIWORK 打包)[/backcolor]方法 6:getLocalVerName 获取自己版本号(AIWORK 打包)[/backcolor]方法 7:getMemory
信息发布软件AIWROK软件苹果点击开始按钮运行最简单的封装脚本例子
AIWROK软件苹果点击开始按钮运行最简单的封装脚本例子 另外主脚本.js封装的:
信息发布软件安卓toast吐司的各种方法应用实例
安卓toast吐司的各种方法应用实例
信息发布软件AIWROK软件支持悬浮窗自由定位和拖拽功能
AIWROK软件支持悬浮窗自由定位和拖拽功能
信息发布软件AIWROK软件安卓工具箱悬浮窗
AIWROK软件安卓工具箱悬浮窗
信息发布软件安卓通过floatUI创建悬浮窗H5界面
安卓通过floatUI创建悬浮窗H5界面
信息发布软件安卓专用吐司toast倒计时到指定时间并显示剩余时间
安卓专用吐司toast倒计时到指定时间并显示剩余时间
信息发布软件aiwrok软件适用于安卓环境下的外网IP获取工具实例
aiwrok软件适用于安卓环境下的外网IP获取工具实例
信息发布软件苹果系统激活模式投屏
1.安装AK-Runner链接下载https://www.pgyer.com/akrunner或者扫码下载AK-Runner.ipa2.安装后需要信任证书找到 设置 --通用---VPN与设备管理3.激活AK-Runner激活需要pc,首先下载激活器📎AK-Runner激活器.zip新手机需要爱思助手协助开启开发者模式,开启过的可以忽略。(爱思助手最好使用最新版)打开爱思助手按照提示操作即可,打开实时投屏。能获取到屏幕信息即可。如果没有出现可能是手机没有开启开发者模式,参考爱思助手
信息发布软件AIWROK软件全部硬件HID按键码小结集合
AIWROK软件全部硬件HID按键码小结集合 方法真实示例:
信息发布软件IOS苹果系统创建具有现代H5视觉效果的界面
IOS苹果系统创建具有现代H5视觉效果的界面
信息发布软件IOS苹果示例如何使用不同的UI风格创建直接运行脚本的按钮
IOS苹果示例如何使用不同的UI风格创建直接运行脚本的按钮
信息发布软件AIWROK苹果IOS线条类[Line]复杂示例
AIWROK苹果IOS线条类[Line]复杂示例
信息发布软件AIWROK软件苹果IOS线条实作简单示例
AIWROK软件苹果IOS线条实作简单示例
信息发布软件AIWROK软件IOS苹果线条类[Line]方法小结
AIWROK软件IOS苹果线条类[Line]方法小结 . 线条宽度设置方法2. 线条高度设置方法3. 线条颜色设置方法实用演示例子:
信息发布软件AIWROK软件苹果IOS吐司toast.show方法小结
AIWROK软件苹果IOS吐司toast.show方法小结 实例呈现:
信息发布软件AIWROK软件苹果IOS系统图色视觉[opencv]方法小结
AIWROK软件苹果IOS系统图色视觉[opencv]方法小结 方法 1:OCR 识别(指定区域)方法 2:获取图像 Base64 编码方法 3:获取 Mat 对象方法 4:Mat 转 Image方法 5:Base64 转 Image方法 6:读取图片文件为 Image方法 7:释放图像资源实战示例子:
信息发布软件AIWROK软件苹果IOS系统图色视觉[opencv]方法小结
AIWROK软件苹果IOS系统图色视觉[opencv]方法小结 方法 1:cv 文件找图(模版匹配 cv 找图)方法 2:cv 文件 OCR(模版匹配 OCR)方法 3:模版匹配(通过模版匹配找到目标对象)方法 4:找多图方法 5:转灰度图(图像转灰度图)方法 6:裁切图片(从大图中截图裁切图片)方法 7:二值化方法 8:颜色翻转实战实例:
信息发布软件AIWROK软件苹果IOS系统随机数[RJrxn1afZqW7yjf2NK]方法小结
AIWROK软件随机数[RJrxn1afZqW7yjf2NK]方法小结 📌GQGqcAlZv2随机字符📌WBJqf91s7J随机整数📌LtUqFOGkc6随机小数📌随机布尔值生成函数📌随机数组元素选择函数使用示例表 📌随机日期使用示例表使用示例表使用示例表📌随机UUID生成函数函数说明表使用示例表📌随机密码 / 验证码随机密码 / 验证码生成函数及使用说明[/backcolor]函数说明表[/backcolor]使用示例表[/back

QQ|( 京ICP备09078825号 )

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

GMT+8, 2025-12-9 11:46 , Processed in 0.227493 second(s), 57 queries .

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

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