ThinkPHP3.2.3实现手机摇一摇随机推荐效果
程序员文章站
2022-06-03 18:01:46
...
手机摇一摇效果基于html5方向感应DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,轻松的实现重力感应、指南针等有趣的功能。今天我们以实例展示THINKPHP3.2.3实现手机摇一摇随机推荐文章效果。可手机访问www.gouugoyin.cn首页,用手机摇一摇,即可在右侧看到摇一摇随机推荐效果。
[PHP]代码
首先在需要摇一摇的模板页引入jquery.js和检测手机摇晃的shade.js,HTML结构如下 <script src="{JS_PATH}/jquery-1.7.1.min.js?1.1.5"></script> <script src="{JS_PATH}/shake.js?1.1.5"></script> <p class="sidebar-widget js_shadeBox"> <h4> 摇一摇随机推荐 </h4> <ul> </ul> </p> 使用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();