木子-前端-方法标签属性小记（普通jsp/html篇）2018

* 文本框灰色提示点击消失属性：placeholder

* 点击事件传多个参数与点击时调用2个方法的写法:onclick

* 多选框通过name元素取勾选的值和勾选的个数

* IE8不支持字符串走Date方法转换时间会报错NaN : var data=new Date(“2018-01-02”);

* jsp兼容IE7,8等的表头书写方式

* jQuery判断浏览器是谷歌还是IE版本

* form表单onsubmit方法中return false依旧传值给后台解决办法

* 框架集frameset的使用

* 出生日期的判断与对日期是否是数字类型的判断（针对于没有使用时间插件的）

* 背景渐变色

* 背景颜色切换

* 一个简单的下拉菜单（只到2级菜单，而且2级菜单的宽度略有瑕疵。我不会搞了，但是是一个可以正常使用的）

* select下拉框设置圆角与去掉点击时难看的蓝色边框

* js如何让图片或者Div产生鼠标悬停或者移开效果的编写事件（也包含jquery的事件）

* ajax传值时后台接收乱码（谷歌不乱码，IE乱码）

* 在页面上页面加上小图标的方式（就是小笔头，小对勾之类的）

* 如何实现简易的文本框后面显示剩余可输入字数

* 如何选择图片并达到预览效果（无上传部分，只是单纯的选择图片。想上传部分自己写去）

* 非常非常happy的问题，前端js执行方法时在Sources敲了断点有数据，不敲断点时无数据

* ES6新增函数

* 文本框灰色提示点击消失属性：placeholder

<input type="text" name="loginName" placeholder="邮箱/手机号/QQ号">

HTML5新提供的一个属性，可以在文本框里有一行默认值，而且不编辑的情况下，value就不会把它当成默认值，缺点是在获得焦点时不会消失，只有在输入东西的时候才会消失，不支持IE6、7、8、9

//-----------------------------------------------------------------------------------------------------------------------------------//

* 点击事件传多个参数与点击时调用2个方法的写法:onclick

传多个参数吧我做了小测试直接在onclick里给了值。如下：

然后在js中取得123的值并输出：如下

function ss(id,ss,sss) {

alert(id); 输出成功了输出的123；

}

这说明onclick可以传递多个参数，切记以逗号隔开

---------------------------------------------------

这是一个onclick有两个方法，其实我觉得有点鸡肋，因为我可以在一个方法里修改onclick的属性再点击一次进入另一个方法

先声明这种有两个方法的点击一下是同时调用。。。。有啥用真没发现：代码如下

同时调用感觉和一个onclick没啥区别，以分号隔开

//-----------------------------------------------------------------------------------------------------------------------------------//

* 多选框通过name元素取勾选的值和勾选的个数

下面是通过name获取勾选数量的代码：

$("input[name='xuanze']:checked").length 这个直接就是获取被勾选的数量

下面是通过name获取勾选的value,我是把value直接设在了input的value里，没办法因为某些特殊原因，值在script里为空，具体原因就不说明了：

$("input:checkbox[name='xuanze']:checked").each(

function(){

var countryCode=$(this).val();

}）；

这是一个类似for循环不停遍历被勾选的通过this的val接收！

//-----------------------------------------------------------------------------------------------------------------------------------//

* IE8不支持字符串走Date方法转换时间会报错NaN : var data=new Date(“2018-01-02”);

我们需要将一串代码复制进去，进行转换才可以，代码如下：

function parseISO8601(dateStringInRange) {

var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/,

date = new Date(NaN), month,

parts = isoExp.exec(dateStringInRange);

if(parts) {

month = +parts[2];

date.setFullYear(parts[1], month - 1, parts[3]);

if(month != date.getMonth() + 1) {

date.setTime(NaN);

}

return date;

}

然后调用方法将参数放入parseISO8601的参数里就行可以完成转换了

//-----------------------------------------------------------------------------------------------------------------------------------//

* jsp兼容IE7,8等的表头书写方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">//这个也很重要因为新版的表头进行了修改

这是不兼容的代码头

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

//-----------------------------------------------------------------------------------------------------------------------------------//

* jQuery判断浏览器是谷歌还是IE版本

网上扒的。。好多。自己用就好

写在$(function() {}；里的

/-------------------IE的

if ($.browser.msie) { //浏览器内核标识

alert( $.browser.version); //浏览器的版本号

}

/-------------------谷歌的

var isChrome = navigator.userAgent.toLowerCase().match(/chrome/) != null; //获取浏览器类型判断是否包含谷歌标识

if (isChrome) { //isChrome包含为true,不包含为false

alert('Chrome');

}；

//-----------------------------------------------------------------------------------------------------------------------------------//

* form表单onsubmit方法中return false依旧传值给后台解决办法

原本我的写法：

<form action="login/login" method="post" onsubmit="login()">

login = function () {var tel = $("#user").val();if(tel==null||tel==""){alert("账号或密码不可以为空");return false;}return true;}

结果发现我尽管return了false但是数据却依旧传给了后台很是不解

解决办法：οnsubmit="return login()"

原因：

通俗点讲我们可以将html当成一个类，login当成一个方法，我点击提交是调用login获取到的只是一个false,理解为只是一个布尔类型而已

//-----------------------------------------------------------------------------------------------------------------------------------//

* 框架集frameset的使用

一个简单版的框架集，没有使用太多属性，效果如下：

代码如下：

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<html>
<head><title>主页</title><script src="/muzi_js/jquery/jquery-3.0.0.min.js"></script>
</head>//-------------------
<frameset rows="9%,*" frameborder="no">                                // 1<frame src="../homePage/homePageTop.html" name="Top"/>             // 2<frameset rows="95%,*" frameborder="no">                           // 3<frameset cols="14%,*" frameborder="no">                       // 4<frame src="../homePage/homePageLeft.html" name="Left"/>   // 5<frame src="../homePage/homePageRight.html" name="Right"/> // 6</frameset><frame src="../homePage/homePageBottom.html" name="Bottom"/>   // 7</frameset>
</frameset>//-------------------
</html>

解释：框架集的主架不能有body，好比我的这个是分了4个部分，实际上用到的是5个html，每一种颜色就是一个html,利用框架集将4个html放入到主html，这个主html不能有body,同时frameset要写在</head>的后面

用白话文一点的将页面好比是一个蛋糕

1时一刀将蛋糕上下分成了一个高度9%与91%的两部分

2时将上部分蛋糕给了Top

3时一刀将剩余的91%的部分上下分成了95%与5%的两部分（注意我说的91%高度是在整体蛋糕的基础上，当被Top拿走后，剩余的部分将算做一个整体，所以3时是将剩余的整体分成两部分，所以高度算作100%，因为Top已经不算做了）

这时候7.Bottom取走了下部分

4时将剩余的蛋糕一刀分成左右两部分宽度14%与86%

5时将14%分给了Left

6时将86%分给了Right

因为我的rows或者cols都是有*号，*代表的就是剩余高度或者宽度。name的作用就是后期在你点击左侧的菜单如果有内容或是A标签页面时定义放在哪一部分上：以A标签为例吧标签内有target属性，写入Right,那么A标签的内容就会显示在name为Right部分。

//-----------------------------------------------------------------------------------------------------------------------------------//

* 出生日期的判断与对日期是否是数字类型的判断（针对于没有使用时间插件的）

我的日期没有使用插件，而是我自己写的，因为这个项目只是写着练手顺便讨好一下我对象的。嘿嘿凑合看吧

大致先讲一下。这一节不讲写法因为这个百度能搜很多，主要讲逻辑。因为我是3个文本框，分别代表了年year,月monty（参数名写错了而已别这个计较），日day

//判断出生日期是否符合标准
if(year != ""&& monty != ""&& day != ""){
   var myDate = new Date();
//年
if(isNaN(year)){//判断年份是否符合规定
   alert("出生日期包含非数字信息。请重新填写");
   return false;
}else if(myDate.getFullYear()<year){//判断填写的年份是否超过当前年份
   alert("亲。。看好你的年份。。你这是从未来穿越了么？");
   return false;
}else if((myDate.getFullYear()-100)>year){//判断填写的年份是否低于当前年份100年
   alert("亲。。看好你的年份。。你这是从古代穿越了么？");
   return false;
}
//月
if(isNaN(monty)){//判断月份是否符合规定
   alert("出生日期包含非数字信息。请重新填写");
   return false;
}else if(monty<1||monty>12){//判断月份是否符合规定
   alert("咳咳。。。这是外星人的月份么？");
   return false;
}else if (myDate.getFullYear()==year&&(myDate.getMonth()+1)<monty){//如果年份是当前年判断填写的月份是否超出当前月
   alert("壮士！你好！你怕是来砸场子的吧？");
   return false;
}
//日
if(isNaN(day)){//判断日期是否符合标准
   alert("出生日期包含非数字信息。请重新填写");
   return false;
}else if(day<1||31<day){//判断日期是否超过允许日期
   alert("哼，你看看日期里最后一个框就是我想说的话！");
   return false;
}else if((monty==4||monty==6||monty==9||monty==11)&&(day>30)){//判断日期根据月份标准判断
   alert("请填写真实的出生日期！");
   return false;
}else if(myDate.getFullYear()==year&&(myDate.getMonth()+1)==monty&&day>myDate.getDate()){//当前年，当前月，判断日期是否超出当前日期
   alert("壮士！你好!你怕是来砸场子的吧？");
   return false;
}else if(monty==2&&day>29){//如果是二月，判断是否日期不超过29天
   alert("你确定你是二月出生的？你怕是二月红吧？");
   return false;
}else if(monty==2&&(((year%100==0)&&(year%400!=0))||(year%4!=0))&&(day>28)){//判断那个啥啥啥月的是不是超过28天
   alert("对不起，我对说你怕是二月红抱歉。你丫的确实是唉！我又不是佛爷，你找别人求药去！");
   return false;
}
}

isNaN（）是判断传入数值是否是数字这是一个方法可以百度一下，如果是数字返回false,不是数字返回true。对于空或者空格等自动转换成0所以建议百度一下

下面的是日期转换，可以百度到的

var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间

//-----------------------------------------------------------------------------------------------------------------------------------//

* 背景渐变色

这个渐变色指的是从顶部到底部颜色变化，不是隔几秒变一次颜色

background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */
       background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/
       background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/
       background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff)); /* Safari 4-5, Chrome 1-9*/
       background: -webkit-linear-gradient(top, #fff, #0000ff); /*Safari5.1 Chrome 10+*/
       background: -o-linear-gradient(top, #fff, #0000ff); /*Opera 11.10+*/

//-----------------------------------------------------------------------------------------------------------------------------------//

* 背景颜色切换

为什么有这个呢。。因为我一个body里套了一个全屏的table。可是table和body。tr和table之间都有边框。我始终去不掉。。。我就没招了想了个办法将body设成变背景的，这样边框会变颜色还能好看点

//因为有边框将body背景设成自动变色
var timer=null;
clearInterval(timer);
   timer= setInterval(function(){
var r = Math.round(Math.random()*255); //Math.random:生成一个0~1的随机数；Math.round:四舍五入。
   var g = Math.round(Math.random()*255);
   var b = Math.round(Math.random()*255);
   document.body.style.backgroundColor="rgb("+r+","+g+","+b+")"
   },1000);

//-----------------------------------------------------------------------------------------------------------------------------------//

* 一个简单的下拉菜单（只到2级菜单，而且2级菜单的宽度略有瑕疵。我不会搞了，但是是一个可以正常使用的）

//jsp中的菜单模型
<div id="main"><ul><li><a class="hide" href="#">我们的服务1</a><ul><li><a href="#">服务1</a></li><li><a href="#">服务1</a></li></ul> </li><li><a class="hide" href="#">我们的服务2</a><ul><li><a href="#">服务2</a></li><li><a href="#">服务2</a></li></ul>  </li><li><a class="hide" href="#">我们的服务3</a><ul><li><a href="#">服务3</a></li><li><a href="#">服务3</a></li></ul>  </li></ul></div>

/*
font-family：设置div中的字体
*/
#main{font-family: 楷体;
}/*width：设置ul的总宽度height：设置ul的总高度list-style-type:设置ul前的点不显示
*/
#main ul{width: 95%;height: 60%;list-style-type:none;
}/*float: 设置左平移还是右平移，将竖行改为横行width：设置每一个主菜单栏的距离我是默认最多5个菜单栏，如果不确定可以js写宽度
*/
#main ul li{float: left;width:20%;
}/*visited：菜单栏普通与鼠标访问的时候display:行级标签转换成块级标签。前后会带有换行符。我也没搞懂。。。color：字体颜色设成黑色background：设置背景颜色   background: #9553AD;font-size:设置字体大小line-height:设置字体的行高
*/
#main ul li a,#main ul li a:visited{display: block;text-align: center;text-decoration: none;color: #000;font-size: 20px;width: 100%;line-height: 200%;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;
}/*隐藏二级菜单ul
*/
#main ul li ul{display: none;width:56%;
}/**/
#main ul li:hover a{color: #fff;background: #E8CFD5;
}
/*显示二级菜单*/
#main ul li:hover ul{display: block;position: fixed;
}
#main ul li:hover ul li{float:none;
}/*添加二级菜单鼠标移过的样式*/
#main ul li:hover ul li a{display: block;background: #faeec7;color: #000;
}
#main ul li:hover ul li a:hover{background: #dfc184;color: #000;
}

//-----------------------------------------------------------------------------------------------------------------------------------//

* select下拉框设置圆角与去掉点击时难看的蓝色边框

border-radius:25px; --设置圆角
outline:none; --去掉蓝色边框（此方法适用于文本框等多种边框）

//-----------------------------------------------------------------------------------------------------------------------------------//

* js如何让图片或者Div产生鼠标悬停或者移开效果的编写事件（也包含jquery的事件）

先写js的事件方式：

jquery的悬停与移开事件写法：

先定义事件

然后调用

//-----------------------------------------------------------------------------------------------------------------------------------//

* ajax传值时后台接收乱码（谷歌不乱码，IE乱码）

这个方法应该不止支持ajax其他类型的url传值也可以试一下

前端：在要传的值上加上encodeURI(encodeURI(值)) 切记要转换两次encodeURI() 函数可把字符串作为 URI 进行编码。

后端：URLDecoder、.decode(值, "UTF-8"）将得到的数据转成汉字

如果使用from表单提交时乱码了只需要在前端加一个encodeURI即可，后台不变

//-----------------------------------------------------------------------------------------------------------------------------------//

* 在页面上页面加上小图标的方式（就是小笔头，小对勾之类的）

大概效果是这个样子的：

非常容易实现，但是找起来很费事

1、bootStrap官网上为我们提供了一系列的小图标，但是需要收费（我比较穷嘿嘿）。大家可以去看一下那些图标https://v3.bootcss.com/

2、我是通过菜鸟教程里的bootStrap框架介绍扒出来的。有样式是一个小笔头，但是引入了bootStrap的css,我引入之后导致我的项目不知道使用哪一个的css了，无奈只能给一点点扒出来。。建议不要这么玩，很麻烦，大概7000多行，删一点试一下删一点试一下的找出来的

3、言归正传：

jsp：就这么一点

css：

a{
color:#337ab7;
text-decoration:none;
}
a:focus,a:hover{
color:#000;
}
.update:before{
content:"\270e"; //这一句是重点中的重点
}

这是小笔头的编码，想用的可以去百度搜content:"\270e"，不要搜content不好找

//-----------------------------------------------------------------------------------------------------------------------------------//

* 如何实现简易的文本框后面显示剩余可输入字数

很简单的总共就3个部分：1、一个input标签设置最大数值。2、一个span标签。3、js做一个键盘松开是的事件

有一个小缺点就是我是键盘松开事件，如果我不松手会一直直接从0飚到52，而且中间不显示，意思就是键盘摁下时是0，松开时直接52了

因为我写的是签名，为了显示好看改成textarea，

js部分：

效果如下：

//-----------------------------------------------------------------------------------------------------------------------------------//

* 如何选择图片并达到预览效果（无上传部分，只是单纯的选择图片。想上传部分自己写去）

1、写一个input标签类型为文件类型的

2、一个img标签，后期的图片预览就在img中显示，因为页面一加载时没有图片，我设定了一个默认图片

3、定义img标签的高度与宽度，因为图片大小不一定所以设定

4、定义选择图片后，如何将图片放到img上

$(function(){$("#filePhoto").change(function(){  var objUrl = getObjectURL(this.files[0]) ;//获取文件信息  console.log("objUrl = "+objUrl);  if (objUrl) {  $("#imgPhoto").attr("src", objUrl);  }   }) ;  function getObjectURL(file) {  var url = null;   if (window.createObjectURL!=undefined) {  url = window.createObjectURL(file) ;  } else if (window.URL!=undefined) {  url = window.URL.createObjectURL(file) ;  } else if (window.webkitURL!=undefined) {  url = window.webkitURL.createObjectURL(file) ;  }  return url ;  }  })

效果预览：

//-----------------------------------------------------------------------------------------------------------------------------------//

* 非常非常happy的问题，前端js执行方法时在Sources敲了断点有数据，不敲断点时无数据

当我有这个问题时，我的第一个想法是拒绝的，后来试了一下，哇塞，好happy的bug，我一脸懵逼的拒绝了。

描述一下问题的产生：

大家都知道浏览器是可以敲断点，我在js里敲了个断点取某一数据的值，当走过这个断点时，我执行下一步然后放开整个方法，获取到数据了！！！！！！！！！！！！！！当我走过这个断点，不执行下一步直接放开，竟然没有取到值。

然后我就一脸懵逼，二脸懵逼，十脸懵逼了，这是什么鬼bug？

然后发现是因为我这个数据的值获取到是需要时间的，而js加载快与数据的获取，导致数据没有获取到，解决办法是加上一个定时，让执行走到这一步时放慢一会然后再走

setTimeout(function(){
           base64Code=reader.result;
           alert(base64Code);
       }, 3000);

//-----------------------------------------------------------------------------------------------------------------------------------//

* ES6新增函数

1、增加模板字符串（可以是字符串，可以是对象，也可以是一个有return的方法）

let name="张三"；

let sex="男";

let user=`有一个人名字叫做${name},性别是${sex}性`；//``是反向引号

2、循环数据repeat

let name="张三";

let name2=name.repeat(2);

结果：name2=张三张三，name=张三

可将一条数据重复N次，不影响原本的数据

3、判断字符串中是否包含子字符串includes

let name="史上最帅";

let isTrue=name.includes("最"); //结果为true

let isTrue=name.includes("的"); //结果为false

let isTrue=name.includes("帅",1); //判断帅字是否在字符串中从第二个字符开始查找，如果是最字就找不到

4、判断某子字符串是否在字符串的最前面startsWith

let name="张三粑粑"；

name.startsWith("张");//true

name.startsWith("张三");//true

name.startsWith("张粑");//false

name.startsWith("粑",2);//true

5、判断数值是否是整数Number.isInteger()

Number.isInteger(3.2);//false

Number.isInteger(3);//true

Number.isInteger(“3”);//false

6、去除一个数的小数部分Math.trunc（）

Math.trunc(3);//3

Math.trunc(3.22);//3

Math.trunc("4.66");//4

由此可见ES6的Math.trunc方法对字符串也可以进行转换

7、方法的修改

我们ES5对的写法是则个样子的

var ss=function(a,b){

alert(a+"和"+b);

}

ss(1,2);

---------原理我就不讲了，你们自己百度吧。。我也不会这个，也在学

ES6确实厉害。。。。不服不行(这玩意叫什么什么箭头函数)

let ss=(a,b)=>{

alert(alert(a+"和"+b););

}

ss(1,2);

王五那张图因为我hello方法用的是this。sex所以我外部调用传的值无效，所以不输出else部分。