兼容性问题
- select下拉框在浏览器里的展示方式不一样，如果想要做到统一，需要自己重写
select {
/*为了保证统一， 边框最好重写一下*/
border: solid 1px #ececec;
/*将默认的select选择框样式清除*/
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/*添加一张默认的图片作为代替浏览器select下拉框的小三角*/
background: url('../images/selectBG2.png') no-repeat;
background-position: right center;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
其他知识点
-
设置z-index的元素必须要有定位属性 position
-
禁止双击选中
$('body').bind("selectstart", function() {return false;});
- 禁止拖动图片和右击保存图片
var img=$("img");
img.on("contextmenu",function(){return false;});
img.on("dragstart",function(){return false;});
-
在一个页面点击链接跳转至另一个页面的选项卡tab中
- 先给链接(也就是a标签)的href属性设置为要跳转的页面
<a href="company.html?type=1">系统消息»</a> <a href="company.html?type=2">作业提醒»</a>-
2.再给这个页面的后天加上判断的条件
这里的判断条件就指的是type=1ortype=2 -
3.根据判断去做事情
$(function(){
// 获取被访问时的 url
var ur =location.href;
// 获取该url(等于号)= 后面的数字
var type=ur.split('?')[1].split("=")[1];
// 3 判断url之后,给各自的tab选项卡自动触发点击事件
if(type == 1){
//给选项卡1添加自动触发事件
$('#xt-message').trigger('click')
}else if(type ==2){
//给选项卡2添加自动触发事件
$('#zy-message').trigger('click')
}
})
image.png
- 替换placeholder功能
<input type="text" name="username" class="inp1" value="请输入姓名">
$('.inp1').focus(function(){
if(this.value == '请输入姓名'){
this.value="";
}
})
$('.inp1').blur(function(){
if(this.value == ''){
this.value="请输入姓名";
}
})
- 获取select的option值的改变,然后做操作
<select name="" id="" onchange="changeVal()">
<option value="0">选择职业</option>
<option value="1">前端开发</option>
<option value="2">javascript</option>
</select>
function changeVal () {
var optionValue = $('select option:selected').val();
console.log(optionValue)
if (optionValue == 1) {
console.log('选择职业')
}else if(optionValue == 2){
console.log('前端开发')
}else if(optionValue == 3){
console.log('javascript')
}
}
- 把字符串中的逗号替换成空格
var arr = "河北,北京,天津"
var newArr = arr.replace(/,/g, " ");
console.log(newArr )
- css减法
width: calc(100% - 100px);
- 鼠标变小手
cursor:pointer;
- 根据当天日期获取本周周一和周日的日期
let now = new Date();
let nowTime = now.getTime() ;
letday = now.getDay();
let oneDayLong = 24*60*60*1000 ;
let MondayTime = nowTime - (day-1)*oneDayLong ;
let SundayTime = nowTime + (7-day)*oneDayLong ;
let monday = new Date(MondayTime);
let sunday = new Date(SundayTime);
console.log(monday) ; // 周一是几号
console.log(sunday) ; // 周日是几号
- 获取本周周一到周日的日期,并且赋值给dateArr
let now = new Date();
let nowTime = now.getTime();
let day = now.getDay();
let oneDayTime = 24 * 60 * 60 * 1000;
let MondayTime = nowTime - (day - 1) * oneDayTime; //显示周一
let SundayTime = nowTime + (7 - day) * oneDayTime; //显示周日
// console.log(util.formatDate(MondayTime))
console.log(util.formatDate(new Date(MondayTime)))
console.log(util.formatDate(new Date(SundayTime)))
this.dateArr = [util.formatDate(new Date(MondayTime)).replace(/\//g, '-'), util.formatDate(new Date(SundayTime)).replace(/\//g, '-')]
let week1 = util.formatDate(new Date(MondayTime)).replace(/\//g, '.').slice(5, 10)
let week7 = util.formatDate(new Date(SundayTime)).replace(/\//g, '.').slice(5, 10)
console.log(week1, week7)
this.week1 = week1
this.week7 = week7
- 获取今天是本月的第几周
let getMonthWeek = function(a, b, c) {
/**
* a = d = 当前日期
* b = 6 - w = 当前周的还有几天过完(不算今天)
* a + b 的和在除以7 就是当天是当前月份的第几周
*/
let date = new Date(a, parseInt(b) - 1, c),
w = date.getDay(),
d = date.getDate();
if (w == 0) {
w = 7;
}
let config = {
getMonth: date.getMonth() + 1,
getYear: date.getFullYear(),
getWeek: Math.ceil((d + 6 - w) / 7),
}
return config;
};
let getDate = getMonthWeek(now.getFullYear(), now.getMonth() + 1, now.getDate());
// console.log("今天是 " + getDate.getYear + " 年的第 " + getDate.getMonth + " 月第 " + getDate.getWeek + " 周");
console.log(getDate.getMonth + "月第" + getDate.getWeek + "周");
this.monthWeek = getDate.getMonth + "月第" + getDate.getWeek + "周"
- 获取今天的日期
var jday = new Date();
console.log(util.formatDates(jday))
// this.today = util.formatDates(jday)
// console.log(this.$u.config.v);
let dateToday = Date.now()
let dayToday = (new Date().getDay() + 7 - 1) % 1
// console.log(dayToday)
// console.log(this.dateList.length)
let daysWeek = this.dateList.map((item, index) => {
let date = new Date(dateToday + (index - dayToday) * 1000 * 60 * 60 * 24)
// console.log(util.formatMD(new Date(date)))
return {
date: util.formatMD(new Date(date)),
qdate: util.formatDates(new Date(date)),
week: (String(date.getDay()) == "1") ? "星期一" : (String(date.getDay()) == "2") ? "星期二" : (String(date.getDay()) == "3") ? "星期三" : (String(date.getDay()) == "4") ? "星期四" : (String(date.getDay()) == "5") ? "星期五" : (String(date.getDay()) == "6") ? "星期六" : "星期日",
}
})
console.log(daysWeek)
daysWeek[0].week = '今天'
daysWeek[1].week = '明天'
daysWeek[2].week = '后天'
this.dateList = daysWeek
- React使用qrcode生成二维码
//下载npm包
npm install --save qrcode
//在要使用的页面引入
import QRCode from 'qrcode';
//使用
QRCode.toDataURL("This is a QR code message")
.then(url => {
console.log(url);
})
.catch(err => {
console.error(err);
});
- filter()方法
let arr = [{ id: 1, name: 'zs' }, { id: 2, name: 'ls' }, { id: 3, name: 'ww' }, { id: 4, name: 'xm' }, { id: 5, name: 'xh' },]
let sum = [3, 4, 5]
let date = arr.filter(item => sum.indexOf(item.id) > -1)
console.log('date', date)
- css使用小技巧
// 给所有元素增加上边框,排除掉第一个
ul li + li{
border-top:1px solid #333;
}
网友评论