这里主要用到一个 js脚本shake.js
在手机浏览器 晃动手机可实现显示随机文章。
shake.js脚本
<code>
/*
*
* Find more about this plugin by visiting
* http://alxgbsn.co.uk/
*
* Copyright (c) 2010-2012 Alex Gibson
* Released under MIT license
*
*/
(function (window, document) {
function Shake() {
//feature detect
this.hasDeviceMotion = 'ondevicemotion' in window;
//default velocity threshold for shake to register
this.threshold = 15;
//use date to prevent multiple shakes firing
this.lastTime = new Date();
//accelerometer values
this.lastX = null;
this.lastY = null;
this.lastZ = null;
//create custom event
if (typeof document.CustomEvent === "function") {
this.event = new document.CustomEvent('shake', {
bubbles: true,
cancelable: true
});
} else if (typeof document.createEvent === "function") {
this.event = document.createEvent('Event');
this.event.initEvent('shake', true, true);
} else {
return false;
}
}
//reset timer values
Shake.prototype.reset = function () {
this.lastTime = new Date();
this.lastX = null;
this.lastY = null;
this.lastZ = null;
};
//start listening for devicemotion
Shake.prototype.start = function () {
this.reset();
if (this.hasDeviceMotion) { window.addEventListener('devicemotion', this, false); }
};
//stop listening for devicemotion
Shake.prototype.stop = function () {
if (this.hasDeviceMotion) { window.removeEventListener('devicemotion', this, false); }
this.reset();
};
//calculates if shake did occur
Shake.prototype.devicemotion = function (e) {
var current = e.accelerationIncludingGravity,
currentTime,
timeDifference,
deltaX = 0,
deltaY = 0,
deltaZ = 0;
if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {
this.lastX = current.x;
this.lastY = current.y;
this.lastZ = current.z;
return;
}
deltaX = Math.abs(this.lastX - current.x);
deltaY = Math.abs(this.lastY - current.y);
deltaZ = Math.abs(this.lastZ - current.z);
if (((deltaX > this.threshold) && (deltaY > this.threshold)) || ((deltaX > this.threshold) && (deltaZ > this.threshold)) || ((deltaY > this.threshold) && (deltaZ > this.threshold))) {
//calculate time in milliseconds since last shake registered
currentTime = new Date();
timeDifference = currentTime.getTime() - this.lastTime.getTime();
if (timeDifference > 1000) {
window.dispatchEvent(this.event);
this.lastTime = new Date();
}
}
this.lastX = current.x;
this.lastY = current.y;
this.lastZ = current.z;
};
//event handler
Shake.prototype.handleEvent = function (e) {
if (typeof (this[e.type]) === 'function') {
return this[e.type](e);
}
};
//create a new instance of shake.js.
var myShakeEvent = new Shake();
myShakeEvent && myShakeEvent.start();
}(window, document));
</code>
/*
*
* Find more about this plugin by visiting
* http://alxgbsn.co.uk/
*
* Copyright (c) 2010-2012 Alex Gibson
* Released under MIT license
*
*/
(function (window, document) {
function Shake() {
//feature detect
this.hasDeviceMotion = 'ondevicemotion' in window;
//default velocity threshold for shake to register
this.threshold = 15;
//use date to prevent multiple shakes firing
this.lastTime = new Date();
//accelerometer values
this.lastX = null;
this.lastY = null;
this.lastZ = null;
//create custom event
if (typeof document.CustomEvent === "function") {
this.event = new document.CustomEvent('shake', {
bubbles: true,
cancelable: true
});
} else if (typeof document.createEvent === "function") {
this.event = document.createEvent('Event');
this.event.initEvent('shake', true, true);
} else {
return false;
}
}
//reset timer values
Shake.prototype.reset = function () {
this.lastTime = new Date();
this.lastX = null;
this.lastY = null;
this.lastZ = null;
};
//start listening for devicemotion
Shake.prototype.start = function () {
this.reset();
if (this.hasDeviceMotion) { window.addEventListener('devicemotion', this, false); }
};
//stop listening for devicemotion
Shake.prototype.stop = function () {
if (this.hasDeviceMotion) { window.removeEventListener('devicemotion', this, false); }
this.reset();
};
//calculates if shake did occur
Shake.prototype.devicemotion = function (e) {
var current = e.accelerationIncludingGravity,
currentTime,
timeDifference,
deltaX = 0,
deltaY = 0,
deltaZ = 0;
if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {
this.lastX = current.x;
this.lastY = current.y;
this.lastZ = current.z;
return;
}
deltaX = Math.abs(this.lastX - current.x);
deltaY = Math.abs(this.lastY - current.y);
deltaZ = Math.abs(this.lastZ - current.z);
if (((deltaX > this.threshold) && (deltaY > this.threshold)) || ((deltaX > this.threshold) && (deltaZ > this.threshold)) || ((deltaY > this.threshold) && (deltaZ > this.threshold))) {
//calculate time in milliseconds since last shake registered
currentTime = new Date();
timeDifference = currentTime.getTime() - this.lastTime.getTime();
if (timeDifference > 1000) {
window.dispatchEvent(this.event);
this.lastTime = new Date();
}
}
this.lastX = current.x;
this.lastY = current.y;
this.lastZ = current.z;
};
//event handler
Shake.prototype.handleEvent = function (e) {
if (typeof (this[e.type]) === 'function') {
return this[e.type](e);
}
};
//create a new instance of shake.js.
var myShakeEvent = new Shake();
myShakeEvent && myShakeEvent.start();
}(window, document));
</code>
添加“摇一摇”事件监听
<code>
window.addEventListener('shake', shakeEventDidOccur, false);
//function to call when shake occurs
function shakeEventDidOccur () {
//put your own code here etc.
if (confirm("Undo?")) {
}
}</code>
window.addEventListener('shake', shakeEventDidOccur, false);
//function to call when shake occurs
function shakeEventDidOccur () {
//put your own code here etc.
if (confirm("Undo?")) {
}
}</code>
取消监听
<code>
window.removeEventListener('shake', shakeEventDidOccur, false);</code>
window.removeEventListener('shake', shakeEventDidOccur, false);</code>
随机文章实现方式
JS代码,当然在这之前需要进入shake.js
脚本
<code>
window.addEventListener('shake', shakeEventDidOccur, false);
//function to call when shake occurs
function shakeEventDidOccur () {
jQuery.post(Bigfa.ajaxurl, {
action : 'random_post',
}, function(data) {
window.location.href = data;
});
}</code>
window.addEventListener('shake', shakeEventDidOccur, false);
//function to call when shake occurs
function shakeEventDidOccur () {
jQuery.post(Bigfa.ajaxurl, {
action : 'random_post',
}, function(data) {
window.location.href = data;
});
}</code>
下面的代码扔到functions.php
中,如果你已经添加了上一篇随机文章的代码这里就不需要
<code>
wp_enqueue_script( 'key', true);
wp_localize_script('key', 'Bigfa', array(
"ajaxurl" => admin_url('admin-ajax.php')
));
add_action( 'wp_ajax_random_post', 'bigfa_random_post' );
add_action( 'wp_ajax_nopriv_random_post', 'bigfa_random_post' );
function bigfa_random_post() {
$posts = get_posts('post_type=post&orderby=rand&numberposts=1');
foreach($posts as $post) {
$link = get_permalink($post);
}
echo $link;
exit;
}</code>
wp_enqueue_script( 'key', true);
wp_localize_script('key', 'Bigfa', array(
"ajaxurl" => admin_url('admin-ajax.php')
));
add_action( 'wp_ajax_random_post', 'bigfa_random_post' );
add_action( 'wp_ajax_nopriv_random_post', 'bigfa_random_post' );
function bigfa_random_post() {
$posts = get_posts('post_type=post&orderby=rand&numberposts=1');
foreach($posts as $post) {
$link = get_permalink($post);
}
echo $link;
exit;
}</code>
浏览器和设备支持情况
- iOS Safari 4.2.1 (and above)
- Android 4.0.3 (default browser)
- Opera Mobile (Android)
- BlackBerry PlayBook 2.0
- Firefox for Android
- FirefoxOS Devices
文章转自 大发 http://fatesinger.com/random-post-botton.html