网站背景加入下雪粒子效果

使用jparticles,感觉他这个首页效果很是酷炫
https://jparticles.js.org

wp-content\themes\xxx\header.php
<div id="snow" style="width: 100%; height: 100%;position:fixed!important; position:absolute;z-index:-10;"></div>
<div id="page" class="hfeed" style="opacity: 0.9;">

wp-content\themes\xxx\footer.php
<script type="text/javascript">
     new JParticles.snow('#snow');
</script>

Ionic

安装node.js npm
http://nodejs.cn/download/releases/
https://nodejs.org/download/release/v5.1.1/node-v5.1.1.pkg

安装cordova
# npm install -g cordova
安装完毕
# cordova –version
5.2.0

安装ionic
# npm install -g ionic -d
# ionic –version
1.6.4

运行程序
ionic serve
1

解决ufeff

把utf-8编码文件的BOM头去掉。
可以编写程序,检测文件头的三个字符是否为0xEF、0xBB和0xBF,
如果是的话,直接删除掉即可。

也可以用Notepad++
打开文件重新编辑,设置为无BOM头的utf-8编码。

JS批量删除和全选

由于本人刚接触javascript,理解起来有些吃力,所以如果有不对的地方希望大家提出来,我再加以改正。这次写的主要是针对JS的批量删除和全选。

先说说我对JS的理解吧,javascript是一种脚本语言,它往往不能独立使用,而是配合html/jsp/php/.net等等使用的,它是客户端脚本语言,也就是说,它是给用户们看的,既然是给用户们看的,那么,恰当的应用JS就会增强用户体验效果,让用户们看起来觉得好看,方便,才会愿意去看。程序员做一个程序目的不就是为了让他所做的能够得到更多的人认可么,谁也不想自己做一个网站没人关注。

下面就针对我用JS做的批量删除和全选说一下,我做的是用户列表页,先把数据从数据库里取出来,做成表,这样样就有数据了,我想实现的效果是,当我选N项,点击批量删除的时候,弹出一个对话框,提示”确认删除N项吗?“,点击”确定“按钮,提示”批量删除成功“,点击”取消“按钮,返回当前页面。

首先,加一个“批量删除”的按钮

<input class=”alldel” onclick=”return batchdel()” type=”submit”  value=”批量删除”>  //“onclick”意思是当点击的时候,会触发一个事件,会执行batchdel()这个函数里的内容。

<li><input type=”checkbox”  id=”check” name=”checks[]” value=”<?php echo $row[“id”];?>” ></li>    //我是用复选框实现我想要的效果。”value”=我所选择的id.

然后定义batchdel()函数里的内容

function batchdel()
{
var checkbox = document.getElementsByName(“checks[]”);  //定义一个变量checkbox,找到name为‘checks[]’的元素。
var number = 0;  //初始化一下number
if(checkbox.length != 0)  //判断条件是当选择的个数不为0时
{
for( i = 0; i < checkbox.length; i )  //循环遍历复选框
{
if (checkbox[i].checked == true)  //如果[i]个复选框为选中状态
{
number ;  //累加所选的个数
}
}
if(number == 0)  //如果个数=0,也就是没有选中内容的时候
{
alert(“请选择”);   //弹出一个提示框,提示用户请选择内容

}else
{
var txt=”确定删除这” number “项吗?”;   //定义一个变量txt ,显示内容是确认删除这number项吗?number为几,显示的就是几。
if (confirm(txt))   //判断txt,这里用到的是confirm函数,confirm的意思就是弹出一个带有“确定”和“取消”的提示框。
{
return true;
}
else
{
return false;
}
}
}

}

接下来说JS实现全选和取消全选

我想实现的是点击“全选”按钮的时候,复选框全部是选中状态,同时按钮上的字变成“取消全选”,再点击“取消全选“的时候,复选框全部都是没被选中的状态,同时按钮上的字再变回”全选“。

先定义一个按钮

<input type=”button” id=”all_checked” name=”all_checked” value=”全选” onclick=”checkedAll()” >

再定义checkedAll()

function checkedAll()
{
var allCheckVal = document.getElementById(“all_checked”).value;     //定义变量    allCheckVal = 按钮上的字(“全选”)
var checked = false;
if(allCheckVal == “全选”)  //当按钮上的字为“全选”时
{
document.getElementById(“all_checked”).value = “取消全选”;   //点击变成取消全选
checked = true;   //同时checked值为true
}
else
{
document.getElementById(“all_checked”).value = “全选”;
checked = false;
}

var allcheck=document.getElementsByName(“checks[]”);
for(var i=0;i<allcheck.length;i )
{
allcheck[i].checked = checked;
}
}

因为变量checked只可能有两个值,一个是true,一个是false,当点击’全选‘时,字变’取消全选‘,checked值为true,点击’取消全选‘时,字变’全选‘,checked值为false。

文本框间传值——JS

[singlepic id=224]

如果文本框有内容时,当我点击文本框时,当前内容会复制到今天1里,如果1里有内容,就会复制到2里,依次类推。

<textarea onclick=”oCopy1(this);” id=”yesterdayWork1″ name=”yesterdayWork1″ >

JS部分
if(document.getElementById(“todayWork1″).value==””)
{
document.getElementById(“todayWork1”).value=document.getElementById(“yesterdayWork1”).value;
}

展示部分代码,重要的是思路。

知识共享  资源共享  心得共享

Js控制css样式(展开收起为例)

1.JQUERY控制CSS样式:

页面部分:指定ID,指定触发事件

<div id=”img1″ style=”width:500px;float:left;” class=”infonav infonav_hidden”>

              <p>文章标题</p>

              <p>1.文章标题一。</p>

              <p>2.文章标题二。</p>

              <p>3.文章标题三。</p>

 </div>

<div id=”img2″ style=”width:100px;float:left;padding-top:36px;”>

<a  border=”0″ style=”border:none;” href=”javascript:” onclick=”infonav_more_down(0);return false;”><img src=”list1.png”></a>

 </div>

jquery部分:

<script type=”text/javascript” src=”jquery-1.4.min.js” charset=”UTF-8″></script>

<script type=”text/javascript” charset=”UTF-8″>

//点击效果实现展开

function infonav_more_down(index)

{

var inHeight = ($(“#img1”).eq(index).find(“p”).length)*100;//设置要展开后显示的高度,100是可调数字。

if(inHeight > 65)

{

$(“#img1”).eq(index).css({height:inHeight});

$(“#img2”).eq(index).replaceWith(“<div id=”img2″ style=”width:100px;float:left;padding-top:360px;”><a onclick=”infonav_more_up(” index “);return false;” href=”javascript:”><img src=”list2.png”></a></div>”);

}

else

{

return false;

}

}

//点击效果实现收起

function infonav_more_up(index)

{

var infonav_height = 65;//设置要收起后显示的高度,15是可调数字。

$(“#img1”).eq(index).css({height:infonav_height});

$(“#img2”).eq(index).replaceWith(“<div id=”img2″ style=”width:100px;float:left;padding-top:36px;”><a onclick=”infonav_more_down(” index “);return false;” href=”javascript:”><img src=”list1.png”></a></div>”);

}

</script>

//===

addClass() 方法向被选元素添加一个或多个类。
$(selector).addClass(class)
removeClass() 方法从被选元素移除一个或多个类。
$(selector).removeClass(class)
hasClass() 方法检查被选元素是否包含指定的 class。
$(selector).hasClass(class)
find() 再次定位或查找指定元素(含)
.find(class)
attr() 方法设置或返回被选元素的属性值。
$(selector).attr(attribute)
$(selector).attr(attribute,value)
$(selector).attr(attribute,function(index,oldvalue))

 

//===

2.Javascript控制CSS样式:

页面部分:指定ID,指定触发事件

<div id=”img5″ class=”show_brand” style=”display: block;” onclick=”b();”></div>

<div id=”img6″ class=”hide_brand” style=”display: none;” onclick=”a();”></div>

javascript部分:

/* js写法:paddingTop ,css写法:padding-top*/

<script>

function a()

{

document.getElementById(“img1″).style.overflow=”hidden”;

document.getElementById(“img2″).style.paddingTop=”75px”;

document.getElementById(“img5″).style.display=”block”;

document.getElementById(“img6″).style.display=”none”;

}

function b()

{

document.getElementById(“img5″).style.display=”none”;

document.getElementById(“img6″).style.display=”block”;

document.getElementById(“img2″).className=”text”;

}

</script>

<style type=”text/css”>

.text{
position:absolute;
left:700px;
bottom:1px;
}

</style>

 

js控制下拉框选中项

昨天帮电商的同事在ecshop的后台添加了一个检索分类的小功能,
当在文本框中输入汉字时,会自动将下拉框中匹配的项设为选中项。
分享如下


<select id="cat_id" name="cat_id">
<option value="0">{$lang.goods_cat}</option>{$cat_list}
</select>
<input id="cat_search" name="cat_search" size="8" type="text" />
function catMatch()
{
var keyWord = document.getElementById("cat_search").value;
var cat = document.getElementById("cat_id");
var catItems;
for(var i=0;i<cat.length;i )
{
catItems = cat.options[i].text;

if(catItems.indexOf(keyWord) != -1)
{
cat.options[i].selected = true;
return
}
}
}

12