ThinkPHP3.2.3实现手机摇一摇随机推荐效果
原创

ThinkPHP3.2.3实现手机摇一摇随机推荐效果
手机摇一摇效果基于html5方向感应DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,轻松的实现重力感应、指南针等有趣的功能。今天我们以实例展示THINKPHP3.2.3实现手机摇一摇随机推荐文章效果。可手机访问www.gouugoyin.cn首页,用手机摇一摇,即可在右侧看到摇一摇随机推荐效果。

首先在需要摇一摇的模板页引入jquery.js和检测手机摇晃的shade.js,HTML结构如下

<script src="{JS_PATH}/jquery-1.7.1.min.js"></script>
<script src="{JS_PATH}/shake.js"></script>
<div class="sidebar-widget js_shadeBox">
    <h4>
       摇一摇随机推荐
    </h4>
    <ul>
 
    </ul>
</div>

使用shake.js检测到用户手机摇晃,当摇晃发生时调用函数shakeEventDidOccur(),向服务器发送Ajax请求,JS代码如下

<script>
$(function(){
	var myShakeEvent = new Shake({  
        threshold: 15  
    });  
  
    myShakeEvent.start();  
  
    window.addEventListener('shake', shakeEventDidOccur, false);  
  
    function shakeEventDidOccur () { 
    	var url = "{:U('home/article/get_rand_list')}";
    	$.post(url , { num:10,order:'rand()' }, function(data){
    		if(data.status == 'ok'){
    			$(".js_shadeBox ul").append(data.html);
    		}else{
    			alert(data.msg);
    		}
    	}, 'json').error(function(){
    		alert('网络错误,请稍后再试');
    	});
    } 
});
</script>

服务器根据提交的请求参数生成随机文章列表数组并循环拼接好的html代码片段,我们将返回html片段追加到ul里,实现了摇一摇随机推荐的效果,服务器端代码如下

<?php
/**
 * 文章控制器 ArticleController.class.php
 * ============================================================================
 * 版权所有 (C) 2015-2016 够过瘾——挨踢男的葵花宝典。
 * 网站地址:   http://www.gouguoyin.cn
 * ----------------------------------------------------------------------------
 * 许可声明:这是一个开源程序,未经许可不得将本软件的整体或任何部分用于商业用途及再发布。
 * ============================================================================
 * Author: 勾国印 (phper@gouguoyin.cn) 
 * Date: 2015年9月27日 上午11:27:53  
*/
namespace Home\Controller;
use Think\Controller;

class ArticleController extends Controller {

    //ajax获取随机文章列表
    public function get_rand_list(){
        $model = 'article';
        if (!IS_AJAX) {
            $this->ajaxReturn(array(
                'msg' => '非法登录方式'
            ));
        }
        
        //接收参数
        $order       = I('order', 'id desc');
        $num         = I('num', 0);
        
        $filter = array();
        
        if ($category_id) {
            $filter['category_id'] = $category_id;
        }
        
        $article_list = M($model)->where($filter)->limit($num)->order($order)->select();
        
        foreach ($rand_list as $k => $v) {
            $html .= "<li><a target='_blank' href='".U("home/article/$v[id]")."'>".$v['title']."</li>";
        }
        $this->ajaxReturn(array(
            'status' => 'ok',
            'html' => $html
        ));
        
    }

}
备注:ThinkPHP3.2.3控制器里获取随机列表的方法是:M($model)->where($where)->order('rand()')->limit($limit)->select();

版权属于:够过瘾——挨踢男的葵花宝典

文章标签:thinkphp3.2.3摇一摇

文章链接:http://www.gouguoyin.cn/php/62.html

转载时必须以链接形式注明原始出处及本声明。

如果您觉得本文对您有所帮助,请小额赞助一下,我会优先回答您在使用过程中出现的问题,点此赞助

如有疑问或遇到技术问题,请加官方QQ群: 421537504   GoCMS官方交流群

文章点评:

表情

143条评论

  • clp 1月前
    编写很棒,想学习一下
  • defugood 3月前
    正是我想要的
  • ggy 3月前
    heihei
  • 1234Q 3月前
    学习一下
  • Meteor 5月前
    挺不错的
  • 雷阿伦ly 6月前
    感谢分享,下载下来看看呢
  • i拼大侠 7月前
    学习一下
  • 阿强 8月前
    dsadasdasdasd
  • anming 8月前
    学习
  • diycps 9月前
  • 2017.11.3 9月前
    123
  • foxel 10月前
    微信方面的还需努力学习,谢谢楼主分享
  • 轩宇网络工作室 10月前
    原来还可以这样玩,学习了。
    • 够过瘾 回复 轩宇网络工作室 #1 10月前
  • kevein 11月前
    学习
  • xzszxiong 11月前
    不错不错
  • php菜鸟升级 1年前
  • 李张强 1年前
    不错不错
  • 背着棺材跳舞 1年前
    挺有意思的功能
  • jijiale 1年前
    学习学习
  • jingye 1年前