1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
主要流程: 点赞—>判断当前设备IP是否对当前文章有过点赞记录—>若有记录,弹出提示“已经赞过了”; 若无记录,当前文章点赞数+1,并在记录设备IP点赞记录的表中插入信息。 文章表 article 必不可少的字段:article_id(必须设置为自增), cat_id, praise 图文表 image_article 必不可少的字段:article_id(必须设置为自增), cat_id, praise 设备IP点赞记录表 client_ip 必不可少的字段:id(必须设置为自增), article_id, cat_id, ip HTML部分: ({$sentence.praise}) JS部分( praise.js ): $(function (){ $(".praise").click(function () { var praise = $(this); var article_id = praise.attr("rel");//获取HTML页面POST过来的article_id var cat_id = praise.attr("rev");//获取HTML页面POST过来的cat_id $.ajax({ type: "POST", url: "praise.php", data: "article_id=" + article_id + "&cat_id=" + cat_id,//数据拼接 cache: false,//不缓存此页面 success: function (data) { praise.html(data);//显示data并局部刷新 }, error: function () { alert("error"); } }); }); }); PHP部分( praise.php ): <?php $connect = mysql_connect("数据库地址","数据库用户名","数据库密码");//链接数据库 if (!$connect){die('Could not connect: ' . mysql_error());} mysql_select_db("数据库名称",$connect);//选择数据库 $ip = $_SERVER["REMOTE_ADDR"];//获取终端IP $article_id = $_POST['article_id'];//获取article_id $cat_id = $_POST['cat_id'];//获取cat_id if (!isset($article_id) || empty($article_id) & !isset($cat_id) || empty($cat_id)) exit;//检测变量是否设置 $look = "select ip from client_ip where article_id='$article_id' and cat_id='$cat_id' and ip='$ip'"; $ip_look = mysql_query($look, $connect); //查询client_ip表中是否存在当前终端IP $count = mysql_num_rows($ip_look); //返回查询结果的记录数目 if ($count == 0) { //如果没有记录 $up_praise = "update article set praise=praise+1 where article_id='$article_id' and cat_id='$cat_id'"; $result = mysql_query($up_praise, $connect); //更新文章点赞数 $up_img_praise = "update image_article set praise=praise+1 where article_id='$article_id' and cat_id='$cat_id'"; $result = mysql_query($up_img_praise, $connect); //更新图文点赞数 $entry_in = "insert into client_ip (article_id,cat_id,ip) values ('$article_id','$cat_id','$ip')"; mysql_query($entry_in, $connect); //写入数据 } else { echo "<script>alert('已经赞过了');</script>"; } $new_praise = "select praise from article where article_id='$article_id' and cat_id='$cat_id'"; $look_new_praise = mysql_query($new_praise, $connect);//查询更新后的文章表点赞数 $new_img_praise = "select praise from image_article where article_id='$article_id' and cat_id='$cat_id'"; $look_new_img_praise = mysql_query($new_img_praise, $connect);//查询更新后的图文表点赞数 if ($arr = mysql_fetch_assoc($look_new_praise)) { $transform_arr[] = $arr;//将查询到的article表的prise转换成数组 } elseif ($arr = mysql_fetch_assoc($look_new_img_praise)) { $transform_arr[] = $arr;//将查询到的image_article表的prise转换成数组 } echo '(' . $transform_arr[0]['praise'] . ')';//打印数组值 mysql_close($connect);//关闭数据库 |
让textarea完全显示文章并且不滚动、不可拖拽、不可编辑
1 2 3 4 5 6 7 8 9 10 11 |
textarea { width: 100%; border: none; outline: none; resize: none; overflow: hidden; padding-bottom: 100%; background-color: inherit; } <textarea readonly="readonly"></textarea> |
浏览器滚动条样式更改
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
::-webkit-scrollbar { // 滚动条整体部分 width: 6px; height: 8px; } ::-webkit-scrollbar-track { // 外层轨道 background-color: #eee; border-radius: 4px; } ::-webkit-scrollbar-track-piece { // 内层滚动槽 background-color: #eee; border-radius: 4px; } ::-webkit-scrollbar-thumb { // 滚动的滑块 background: rgba(32, 33, 36, 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(32, 33, 36, 0.4); width: 10px; } ::-webkit-scrollbar-corner { // 边角 display: none; } ::-webkit-scrollbar-button { // 滚动条两端的按钮 display: none; } 注:目前仅Chrome下生效 |
PHP获取当前位置
如果想动态的获取当前栏目所处的位置,就要关联到数据库,下面是例子:
栏目表(category):
涉及到二级目录。
(1)首先在你的首页导航栏,还有首页所出现的链接后面,为栏目加上catid,就像这样: 。
当然,子页公用的导航栏也是要加上的。
(2)然后在控制[……]
ThinkPHP动态版本控制
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
动态版本控制可以根据时间戳来实现,但是这样的话,每次打开页面都会重新下载加了版本控制的文件,如果你的页面自身打开本来就慢的话, 这样一来,无疑会带来很差的用户体验。 但是如果在每个引用文件后面都手动加上版本,如果页面比较多的话,这很明显是个很蠢的做法,所以我们可以这样做: (1)在入口文件定义公共模块: define('COMMON_PATH','./Common/'); 然后将Home文件夹下的Common剪切出来,放在和入口文件同目录。 (2)在Common-->Conf-->config.php中配置一个数组: <?php return array( //CSS版本控制 'cssVersion' => '1.0', 'cssVersionid' => '1.0', //JS版本控制 'jsVersion' => '1.0', 'jsVersionid' => '1.0', ); (3)在控制器中引入 <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { public function index(){ /* 版本控制 */ $config = require(COMMON_PATH.'Conf/config.php'); this−>assign(′cssVersionid′,config['cssVersionid']); this−>assign(′jsVersionid′,config['jsVersionid']); /* 页面显示 */ $this->display(); } } 当然所有的assign必须放在$this->display();前面。在thinkPHP3.2.3中,你也可以这样写: <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { public function __construct(){ /* 版本控制 */ parent::__construct(); $config = require(COMMON_PATH.'Conf/config.php'); this−>assign(′cssVersionid′,config['cssVersionid']); this−>assign(′jsVersionid′,config['jsVersionid']); } public function index(){ /* 页面显示 */ $this->display(); } } (4)这时候就可以在HTML页面引入了 <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/page/index.css?v={$cssVersionid}"> <script src="__PUBLIC__/js/page/index.js?v={$jsVersionid}"></script> 这样一来,每次有更新的话,只需要手动在config.php更改版本就行了,而且可以只更新CSS或JS其中一个。 |
图片加载失败显示默认图片占位符
为网站的图片加上加载失败的默认占位符会让网站看起来更专业、更严谨。
<img src=”__PUBLIC__/img/simple/simplelove.png” onerror=”onerror=null;src=’__PUBLIC__/img/defaultpic.jpg'”>[……]
JS根据不同浏览器(分辨率)调用不同css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
根据不同浏览器: <script type="text/javascript"> var version = navigator.userAgent; if (version.indexOf("MSIE") > 1) { document.write("<link href='ie.css' rel='stylesheet' type='text\/css'\/>"); } else if (version.indexOf("Chrome") > 1) { document.write("<link href='chrome.css' rel='stylesheet' type='text\/css'\/>"); } else if (version.indexOf("Firefox") > 1) { document.write("<link href='ff.css' rel='stylesheet' type='text\/css'\/>"); } </script> 根据不同分辨率: <script type="text/javascript"> if (screen.width == 1024){ document.write("<link href='css/css1.css' rel='stylesheet' type='text\/css'\/>"); }else { document.write("<link href='css/css2.css' rel='stylesheet' type='text\/css'\/>");} </script> |
为 placeholder 自定义样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
textarea::-webkit-input-placeholder{ padding: 1em; } textarea::-moz-placeholder{ padding: 1em; } <span style="color: #339966;">同理,input的定义方法为:</span> input::-webkit-input-placeholder{ padding: .2em; } input::-moz-placeholder{ padding: .2em; } |
关于HTML5在动画制作工具Animatron的一些问题
Animatron是国外一款在线HTML5动画制作工具,网址:www.animatron.com 当然,想使用的话,是需要FQ的。
用animatron制作好的动画是可以下载为代码和GIF的,这时候付费玩家自然又是充满优越感的,因为付费玩家可以下载普通玩家下不到的部分。
下载下来的文件夹[……]
在HTML中禁止文字的复制
很简单,只需在<body>中添加如下代码:
1 2 3 4 5 6 7 |
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false' onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'> |