目录
* 点击事件传多个参数与点击时调用2个方法的写法:onclick
* IE8不支持字符串走Date方法转换时间会报错NaN : var data=new Date(“2018-01-02”);
* form表单onsubmit方法中return false依旧传值给后台解决办法
* 出生日期的判断与对日期是否是数字类型的判断（针对于没有使用时间插件的）
* 一个简单的下拉菜单（只到2级菜单，而且2级菜单的宽度略有瑕疵。我不会搞了，但是是一个可以正常使用的）
* js如何让图片或者Div产生鼠标悬停或者移开效果的编写事件（也包含jquery的事件）
* 在页面上页面加上小图标的方式（就是小笔头，小对勾之类的）
* 如何选择图片并达到预览效果（无上传部分，只是单纯的选择图片。想上传部分自己写去）
* 非常非常happy的问题，前端js执行方法时在Sources敲了断点有数据，不敲断点时无数据
* 文本框灰色提示点击消失属性：placeholder
<input type="text" name="loginName" placeholder="邮箱/手机号/QQ号">HTML5新提供的一个属性，可以在文本框里有一行默认值，而且不编辑的情况下，value就不会把它当成默认值，缺点是在获得焦点时不会消失，只有在输入东西的时候才会消失，不支持IE6、7、8、9
//-----------------------------------------------------------------------------------------------------------------------------------//
* 点击事件传多个参数与点击时调用2个方法的写法:onclick
传多个参数吧我做了小测试直接在onclick里给了值。如下：
<button οnclick="ss('123','234','345')">
然后在js中取得123的值并输出：如下
function ss(id,ss,sss) {
alert(id); 输出成功了输出的123；
}
这说明onclick可以传递多个参数，切记以逗号隔开
---------------------------------------------------
这是一个onclick有两个方法，其实我觉得有点鸡肋，因为我可以在一个方法里修改onclick的属性再点击一次进入另一个方法
先声明这种有两个方法的点击一下是同时调用。。。。有啥用真没发现：代码如下
<button οnclick="ss()；sss()">
同时调用感觉和一个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">//这个也很重要因为新版的表头进行了修改
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> //这是关键如果你要兼容IE7，就将8改为7怎样改都可以
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> //这是编码格式，UTF-8嘛！
<meta name="viewport" content="width=device-width" /> //这是控制页面为全屏大下，因为屏幕兼容问题嘛，这个不重要顺手带的
这是不兼容的代码头
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//-----------------------------------------------------------------------------------------------------------------------------------//
* 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()"
原因：
login ()虽然返回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：就这么一点
<a href="#"><span class="update"></span></a>
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部分。
52
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
