手机持续震动的实现

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

javascript实现手机震动API代码,javascriptapi

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

图片 1

判断浏览器对振动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 level
function startVibrate(duration) {
navigator.vibrate(duration);
}
// Stops vibration
function 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 given
function startPeristentVibrate(duration, interval) {
vibrateInterval = setInterval(function() {
startVibrate(duration);
}, interval);
}

上面的这段代码只是针对振动参数是一个数字的情况,如果参数是数组,你还需要计算一下它的总共持续时间,然后根据它的特征来进行循环。

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

你对这个JavaScript振动API的感觉如何?是认为它会很快流行起来?还是没有多大用处?

现代浏览器里提供的新的API越来越倾向于移动手机应用,而不是传统的桌面应用,比如
javascript地…

首先声明,这个方法是网上一个朋友发给我的。非自己原创。 这是他的github地址。

首先,创建了单例。直接贴代码了。

复制代码 代码如下:

javascript的列表切换【实现代码】,javascript代码

IE兼容性没处理,确切的说不太会,还望指点一二

思路:

1、js获取要给定点击事件的按钮组对象,如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i].index=i;

2、匹配index为将要显示的DOM对象

3、点击过程中要切换class,先判断是否含有指定class,有就删除,没有就添加指定class。注:if(!null)为真.

4、onmouseover同理

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/index.css">
  <script src="js/index-banner.js"></script>
</head>
<body>
  <h3>javascript切换效果</h3>
  <section>
    <div class="baner_parent">
      <div class="will_left btn_left">
        <ul>
          <li data-i="0" class="selected js_btn"><img src="img/Ferrari.png">法拉利</li>
          <li data-i="1" class="js_btn"><img src="img/Mercedes1.png">奔驰</li>
          <li data-i="2" class="js_btn"><img src="img/BMW.png">宝马</li>
          <li data-i="3" class="js_btn"><img src="img/Audi.png">奥迪</li>
        </ul>
      </div>
      <div class="will_left banner_right">
        <!--法拉利-->
        <div class="banner_lists">
          <img src="img/ferrari01.jpg" alt="图片 2">
          <ul>
            <li class="will_left btn selected">法拉利1</li>
            <li class="will_left btn">法拉利2</li>
            <li class="will_left btn">法拉利3</li>
            <li class="will_left btn">法拉利4</li>
          </ul>
        </div>
        <!--奔驰-->
        <div class="banner_lists">
          <img src="img/benchi01.jpg" alt="图片 3">
          <ul>
            <li class="will_left btn selected">奔驰1</li>
            <li class="will_left btn">奔驰2</li>
            <li class="will_left btn">奔驰3</li>
            <li class="will_left btn">奔驰4</li>
          </ul>
        </div>
        <!--宝马-->
        <div class="banner_lists">
          <img src="img/baoma01.jpg" alt="图片 4">
          <ul>
            <li class="will_left btn selected">宝马1</li>
            <li class="will_left btn">宝马2</li>
            <li class="will_left btn">宝马3</li>
            <li class="will_left btn">宝马4</li>
          </ul>
        </div>
        <!--奥迪-->
        <div class="banner_lists">
          <img src="img/aodi01.jpg" alt="图片 5">
          <ul>
            <li class="will_left btn selected">奥迪1</li>
            <li class="will_left btn">奥迪2</li>
            <li class="will_left btn">奥迪3</li>
            <li class="will_left btn">奥迪4</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

CSS

*{
  list-style: none;
  border:none;
  text-decoration: none;
  margin:0;
  padding:0;
  box-sizing: border-box;
}
h3{
  text-align: center;
  color: dimgrey;
}
.baner_parent{
  width: 1000px;
  margin:0 auto;
}
.will_left{
  float: left;
}
.will_right{
  float: right;
}
.btn_left ul li{
  text-align: center;
  width: 160px;
  height:98px;
  background-color: darkgrey;
  padding: 13px 0;
  cursor: pointer;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
.btn_left ul li.selected{
  background-color: cornflowerblue;
}
.btn_left ul li:not(:nth-child(4)){
  border-bottom: 1px solid dimgrey;
}
.btn_left ul li img{
  width: 50px;
  height: 50px;
}
.btn_left ul li span{
  display:block;
}
.banner_right,.banner_lists img{
  width: 800px;
  height: 391px;
  position: relative;
}
.banner_lists{
  position: absolute;
  height: 391px;
}
.banner_lists:not(:nth-child(1)){
  display: none;
}
.banner_lists ul{
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
}
.btn{
  height: 33px;
  width: 200px;
  border-right: 1px solid #000;
  margin-top: -3px;
  text-align: center;
  line-height: 33px;
  background-color: darkgrey;
  opacity: .8;
  cursor: pointer;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
.btn:hover,.btn.selected{
  background-color: cornflowerblue;
}

JS

/**
 * Created by Administrator on 2016/4/30 0030.
 * blog:wjf444128852.github.io
 *  不支持IE
 */
window.onload=function(){
  var arrFR = ['img/ferrari01.jpg','img/ferrari02.jpg','img/ferrari03.jpg','img/ferrari04.jpg'];
  var arrBC = ['img/benchi01.jpg','img/benchi02.jpg','img/benchi03.jpg','img/benchi04.jpg'];
  var arrBM = ['img/baoma01.jpg','img/baoma02.jpg','img/baoma03.jpg','img/baoma04.jpg'];
  var arrAD = ['img/aodi01.jpg','img/aodi02.jpg','img/aodi03.jpg','img/aodi04.jpg'];
  var array = [arrFR,arrBC,arrBM,arrAD];
  var btns=document.getElementsByClassName('js_btn');
  var divList=document.getElementsByClassName('banner_lists');
  // 品牌切换
  for(var i=0;i<btns.length;i++){
    btns[i].index=i;
    btns[i].onclick=showItems;
  }
  //ClassName切换,是否含有指定class
  function hasClass(elem,cls){
    return elem.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
  }
  // 没有就追加指定class
  function addClass(elem,cls){
    if(!hasClass(elem,cls)){
      elem.className+=" "+cls;
    }
  }
  // 有就移除指定class
  function removeClass(elem,cls){
    if(hasClass(elem,cls)){
      var reg=new RegExp('(\\s|^)'+cls+'(\\s|$)');
      elem.className=elem.className.replace(reg,"");
    }
  }
  //ClassName切换,移除所有
  function removeAll(obj){
    for (var i = 0; i < obj.length; i++) {
      removeClass(obj[i],"selected");
    }
  }
  // DIV显示切换
   function showItems(){
     removeAll(btns);
     addClass(this,"selected");
     for (var s = 0; s< divList.length; s++) {
      divList[s].style.display="none";
      divList[this.index].style.display="block";    
    }
    willHover(this.index);
  }
  // 右边切换按钮效果
  function willHover(sum){
    var hoverbtns=divList[sum].getElementsByClassName('btn');
    var img=divList[sum].getElementsByTagName('img')[0];
    for (var i = 0; i < hoverbtns.length; i++) {
      hoverbtns[i].index=i;
      hoverbtns[i].onmouseover=function(){
        removeAll(hoverbtns);
         addClass(this,"selected");
        var imgSrc=array[sum][this.index];
        img.src=array[sum][this.index];
      }
    }
  }
  // 默认第一次可以切换
  willHover(0);
};

以上这篇javascript的列表切换【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持帮客之家。

IE兼容性没处理,确切的说不太会,还望指点一二 思路:
1、js获取要给定点击事件的按钮组…

图片 6

ShakeInstance.h中:

#import#import@interface ShakeInstance : NSObject

//单例接口

+ (ShakeInstance *)shareInstance;

– (void)vibrateCallback;

– (void) triggerShake;

@end

<?php
header(“Content-Type:text/html;charset=utf-8″);
if (isset($_GET[‘number’])) {
$url =
‘’;
$number = $_GET[‘number’];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS,
“mobileCode={$number}&userId=”);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$data = curl_exec($ch);
curl_close($ch);
$data = simplexml_load_string($data);
if (strpos($data, ‘http://’)) {
echo ‘手机号码格式错误!’;
} else {
echo $data;
}
}
?>
<form action=”mobile.php” method=”get”>
手机号码: <input type=”text” name=”number” /> <input
type=”submit” value=”提交” />
</form>

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

ShakeInstance.m中:

#import “ShakeInstance.h”

@implementation ShakeInstance

static ShakeInstance *shakeInstance = nil;

//单例接口

+ (ShakeInstance *)shareInstance

{

if (!shakeInstance)

{

@synchronized(self)

{

if (!shakeInstance)

{

shakeInstance = [[ShakeInstance alloc] init];

}

}

}

return shakeInstance;

}

– (void)vibrateCallback

{

// 此处设置震动间隔

[self performSelector:@selector(triggerShake) withObject:nil
afterDelay:1];//设置震动之间的间隔时间

}

– (void)triggerShake

{

SystemSoundID soundID = kSystemSoundID_Vibrate;

AudioServicesPlaySystemSound (soundID);

}

@end

您可能感兴趣的文章:

  • 免费手机号码归属地API查询接口和PHP使用实例分享
  • PHP手机号码归属地查询代码(API接口/mysql)
  • PHP 手机归属地查询 api
  • PHP通过API获取手机号码归属地
  • php验证手机号码(支持归属地查询及编码为UTF8)
  • PHP实现查询手机归属地的方法详解

复制代码 代码如下:

ViewController.m中调用:

#import “ViewController.h”

#import “ShakeInstance.h”

@interface ViewController ()

– (IBAction)stopShake:(id)sender;

– (IBAction)startShake:(id)sender;

@end

@implementation ViewController

void systemAudioCallback(SystemSoundID soundId, void *clientData)

{

[[ShakeInstance shareInstance] vibrateCallback];

}

– (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

}

– (void)didReceiveMemoryWarning

{

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

– (IBAction)stopShake:(id)sender

{

AudioServicesRemoveSystemSoundCompletion(kSystemSoundID_Vibrate);//移除停止震动

[NSObject cancelPreviousPerformRequestsWithTarget:[ShakeInstance
shareInstance]

selector:@selector(triggerShake)

object:nil];

}

– (IBAction)startShake:(id)sender

{

AudioServicesAddSystemSoundCompletion(kSystemSoundID_Vibrate, NULL,
NULL, systemAudioCallback, NULL);

SystemSoundID soundID = kSystemSoundID_Vibrate;

AudioServicesPlaySystemSound (soundID);

}

@end’

// 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 level
function startVibrate(duration) {
navigator.vibrate(duration);
}
// Stops vibration
function 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 given
function startPeristentVibrate(duration, interval) {
vibrateInterval = setInterval(function() {
startVibrate(duration);
}, interval);
}

上面的这段代码只是针对振动参数是一个数字的情况,如果参数是数组,你还需要计算一下它的总共持续时间,然后根据它的特征来进行循环。

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

你对这个JavaScript振动API的感觉如何?是认为它会很快流行起来?还是没有多大用处?

您可能感兴趣的文章:

  • jsp图片效果大全(图像震动效果、闪烁效果、自动切换图像)
  • js鼠标滑过图片震动特效的方法
  • js 鼠标放图片上抖动效果
  • javascript实现的仿腾讯QQ窗口抖动效果代码
  • js 窗口抖动示例
  • js模拟QQ窗口的抖动效果
  • js实现鼠标触发图片抖动效果的方法
  • JS实现仿QQ聊天窗口抖动特效
  • jquery.messager.js插件导致页面抖动的解决方法
  • js窗口震动小程序分享

相关文章