// querySelector() 返回匹配到的第一个元素var item = document.querySelector('.item')console.log(item)// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = document.querySelectorAll('.item')console.log(items[0])1234567
阻止默认行为
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) {event = event || window.event；if (event.preventDefault){// w3c方法 阻止默认行为
event.preventDefault()
} else{// ie 阻止默认行为
event.returnValue = false
}
}, false)// jQuery$('#btn').on('click', function (event) {event.preventDefault()
})1234567891011121314151617
阻止冒泡
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) {event = event || window.event；if (event.stopPropagation){// w3c方法 阻止冒泡
event.stopPropagation()
} else{// ie 阻止冒泡
event.cancelBubble = true
}
}, false)// jQuery$('#btn').on('click', function (event) {event.stopPropagation()
})1234567891011121314151617
鼠标滚轮事件
$('#content').on("mousewheel DOMMouseScroll", function (event) {
// chrome &ie || // firefox
var delta = (event.originalEvent.wheelDelta &&(event.originalEvent.wheelDelta >0 ? 1 : -1)) || (event.originalEvent.detail &&(event.originalEvent.detail >0 ? -1 : 1))
if (delta >0) {
// 向上滚动
console.log('mousewheel top')
} else if (delta <0) {// 向下滚动
console.log('mousewheel bottom')
}
})123456789101112
检测浏览器是否支持svg
function isSupportSVG() {
var SVG_NS = 'http://www.w3.org/2000/svg' return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect
}
// 测试console.log(isSupportSVG())1234567
检测浏览器是否支持canvas
function isSupportCanvas() {
if(document.createElement('canvas').getContext){return true
}else{return false
}
}// 测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas())12345678910
检测是否是微信浏览器
function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase()
if (ua.match(/MicroMessenger/i)=="micromessenger") {
return true
} else {
return false
}
}// 测试alert(isWeiXinClient())1234567891011
jQuery 获取鼠标在图片上的坐标
$('#myImage').click(function(event){
//获取鼠标在图片上的坐标
console.log('X：' + event.offsetX+'\n Y:' + event.offsetY)
//获取元素相对于页面的坐标
console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top)
})1234567
验证码倒计时代码
<!-- dom --><input id="send" type="button" value="发送验证码">12
// 原生js版本var times = 60, // 临时设为60秒
timer = null
document.getElementById('send').onclick = function () {
// 计时开始
timer = setInterval(function () {
times-- if (times <= 0) {
send.value = '发送验证码'
clearInterval(timer)
send.disabled = false
times = 60
} else {
send.value = times + '秒后重试'
send.disabled = true
}
}, 1000)
}1234567891011121314151617181920
// jQuery版本var times = 60,
timer = null
$('#send').on('click', function () {
var $this = $(this) // 计时开始
timer = setInterval(function () {
times-- if (times <= 0) {
$this.val('发送验证码')
clearInterval(timer)
$this.attr('disabled', false)
times = 60
} else {
$this.val(times + '秒后重试')
$this.attr('disabled', true)
}
}, 1000)
})12345678910111213141516171819202122
常用的一些正则表达式
//匹配字母、数字、中文字符
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
//验证邮箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
//验证手机号
/^1[3|5|8|7]\d{9}$/
//验证URL
/^http:\/\/.+\./
//验证身份证号码
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
//匹配中文字符的正则表达式
/[\u4e00-\u9fa5]/
//匹配双字节字符(包括汉字在内)
/[^\x00-\xff]/1234567891011121314151617181920
js时间戳、毫秒格式化
function formatDate(now) {
var y = now.getFullYear() var m = now.getMonth() + 1// 注意js里的月要加1
var d = now.getDate() var h = now.getHours()
var m = now.getMinutes()
var s = now.getSeconds() return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s
}
var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20)
console.log(nowDate.getTime())// 获得当前毫秒数: 1465816710020console.log(formatDate(nowDate))123456789101112131415
js限定字符数（注意：一个汉字算2个字符）
<input id="txt" type="text">//字符串截取function getByteVal(val, max) {
var returnValue = '' var byteValLen = 0 for (var i = 0i <val.lengthi++) {if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2else byteValLen += 1 if (byteValLen >max) break
returnValue += val[i]
}return returnValue
}
$('#txt').on('keyup', function () {
var val = this.value if (val.replace(/[^\x00-\xff]/g, "**").length >14) {this.value = getByteVal(val, 14)
}
})12345678910111213141516171819
js判断是否移动端及浏览器内核
var browser = {
versions: function() {
var u = navigator.userAgent
return {
trident: u.indexOf('Trident') >-1, //IE内核
presto: u.indexOf('Presto') >-1, //opera内核
webKit: u.indexOf('AppleWebKit') >-1, //苹果、谷歌内核
gecko: u.indexOf('Firefox') >-1, //火狐内核Gecko
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^]+( U)? CPU.+Mac OS X/), //ios
android: u.indexOf('Android') >-1 || u.indexOf('Linux') >-1, //android
iPhone: u.indexOf('iPhone') >-1 , //iPhone
iPad: u.indexOf('iPad') >-1, //iPad
webApp: u.indexOf('Safari') >-1 //Safari
}
}
}
if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
alert('移动端')
}123456789101112131415161718192021
之前我用过一个检测客户端的库 觉得挺好用的，也推荐给大家 叫 device.js，大家可以 Googel 或 百度
GItHub仓库地址：https://github.com/matthewhudson/device.js
getBoundingClientRect() 获取元素位置
//它返回一个对象，其中包含了left、right、top、bottom四个属性var myDiv = document.getElementById('myDiv')var x = myDiv.getBoundingClientRect().left
var y = myDiv.getBoundingClientRect().top
// 相当于jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop123456
HTML5全屏
function fullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
}}
fullscreen(document.documentElement)12345678910111213
我修改测试通过一个。但是有个问题。若改成鼠标悬停边缘滚下去，也就是onMouseOver。是停不下来的，会一直滚下去，因为无论怎么样都是鼠标碰触事件。所以我强烈建议用点击事件,onclick。js css image都是调用的。我都写到页面里了，你自己改下。图片地址我没改。本地测试的。自己换成你的图片。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<title>图片展示特效</title>
<style>
body{ margin:20px autowidth:100%height:auto}
#dHomePageCarousel {
height:221px
width:670px
position:relative
margin:40px auto
}
#dLocalHomesCarousel {
height:131px
margin:0px 2px 3px 1px
overflow:hidden
position:relative
}
.divCarouselInfo {
color:#3C404E
font-size:12px
width:639px
height:64px
line-height:16px
margin-right:15px
padding-top:10px
position:relative
}
.imgBorder{
border:2px solid #fff
position:absolute
cursor:pointer
}
.imgBorder:hover {
border:2px solid #FFAA55
cursor:pointer
position:absolute
}
.btnCarouselLT {
background:url("../images/btn_nav_carousel.png") no-repeat scroll left top transparent
display:block
height:41px
overflow:hidden
position:absolute
cursor:pointer
top:17px
width:40px
}
.btnCarouselRT {
background:url("../images/btn_nav_carousel.png") no-repeat scroll right top transparent
display:block
height:41px
overflow:hidden
position:absolute
cursor:pointer
top:17px
width:40px
}
img {
border:medium none
}
.author{ width:700pxmargin:0 autoheight:autotext-align:center}
</style>
</head>
<body onLoad="clearInterval(autoplay)">
<!-- 头开始 -->
<!-- 滚动房源广告开始 -->
<div id="dHomePageCarousel" style="padding-left:15px">
<div id=dLocalHomesCarousel>
<img id="imgSmallLeft" class="imgBorder" style="height:50pxwidth:70pxleft:10pxbottom:5px" onClick="clearInterval(autoplay)moveD('l')"/>
<img id="imgMiddleLeft" class="imgBorder" style="height:75pxwidth:100pxleft:110pxbottom:5px" onClick="clearInterval(autoplay)move('l')"/>
<img id="imgBig" class="imgBorder" style="height:105px width:140pxleft:240pxbottom:5px" onClick="openNewPage()"/>
<img id="imgMiddleRight" class="imgBorder" style="height:75pxwidth:100px left:410px bottom:5px" onClick="clearInterval(autoplay)move('r')"/>
<img id="imgSmallRight" class="imgBorder" style="width:70pxheight:50pxleft:540pxbottom:5px" onClick="clearInterval(autoplay)moveD('r')"/>
<img id="imgHidden" class="imgBorder" style="width:10pxheight:10pxleft:-90pxbottom:5px"/>
</div>
<script type="text/javascript">
function AdItem(Photo,url) {
this.Photo = Photo
this.url = url
}
var ad = new Array()
ad[0] = new AdItem('images/1.jpg','#')ad[1] = new AdItem('images/2.jpg','#')ad[2] = new AdItem('images/3.jpg','#')ad[3] = new AdItem('images/4.jpg','#')ad[4] = new AdItem('images/5.jpg','#')ad[5] = new AdItem('images/6.jpg','#')
var img = new Array()
img[0] = document.getElementById("imgSmallLeft")
img[1] = document.getElementById("imgMiddleLeft")
img[2] = document.getElementById("imgBig")
img[3] = document.getElementById("imgMiddleRight")
img[4] = document.getElementById("imgSmallRight")
img[5] = document.getElementById("imgHidden")
var position = 0
for(i=0i<img.lengthi++){
img[i].src = ad[i].Photo
}
var cur = 2
adname.href = ad[2].url
</script>
</div>
<script type="text/javascript">
function roll(direction){
var imgLength = img.length
var dataLength = ad.length
var start = position
if('r' == direction){
for(var i=0i<imgLengthi++){
start = start + 1
if(start >(dataLength-1))
start = start - dataLength
img[i].src = ad[start].Photo
}
position = position + 1
if(position >(dataLength-1))
position = position - dataLength
}
if('l' == direction){
var a = true
for(var i=0i<imgLengthi++){
if(a){
start = start - 1
if(start <0){
start = start + dataLength
a = false
}
if(start <(dataLength-1)){
a = false
}
}else{
start = start + 1
if(start >(dataLength-1)){
start = start - dataLength
a = true
}
}
//alert(position + " === " + i + " === " + start)
img[i].src = ad[start].Photo
if(start == (dataLength-1)){
start = -1
}
}
position = position - 1
if(position <0)
position = position + dataLength
}
}
function right(){
i++
var img0H = parseFloat(img[0].style.height)
var img0W = parseFloat(img[0].style.width)
var img0L = parseFloat(img[0].style.left)
var img1H = parseFloat(img[1].style.height)
var img1W = parseFloat(img[1].style.width)
var img1L = parseFloat(img[1].style.left)
var img2H = parseFloat(img[2].style.height)
var img2W = parseFloat(img[2].style.width)
var img2L = parseFloat(img[2].style.left)
var img3H = parseFloat(img[3].style.height)
var img3W = parseFloat(img[3].style.width)
var img3L = parseFloat(img[3].style.left)
var img4H = parseFloat(img[4].style.height)
var img4W = parseFloat(img[4].style.width)
var img4L = parseFloat(img[4].style.left)
var img5H = parseFloat(img[5].style.height)
var img5W = parseFloat(img[5].style.width)
var img5L = parseFloat(img[5].style.left)
//解决IE兼容性问题
if(navigator.userAgent.indexOf("MSIE")>0 &&i%2==0) {
img1W = img1W + 1
img2H = img2H + 1
img2L = img2L + 1
img3H = img3H + 1
img3L = img3L + 1
img4L = img4L + 1
img4W = img4W + 1
}
img[0].style.height = (img0H - 2).toString() + "px"
img[0].style.left = (img0L - 5).toString() + "px"
img[0].style.width = (img0W - 3).toString() + "px"
img[1].style.height = (img1H - 1).toString() + "px"
img[1].style.left = (img1L - 5).toString() + "px"
img[1].style.width = (img1W - 1.5).toString() + "px"
img[2].style.height = (img2H - 1.5).toString() + "px"
img[2].style.left = (img2L - 6.5).toString() + "px"
img[2].style.width = (img2W - 2).toString() + "px"
img[3].style.height = (img3H + 1.5).toString() + "px"
img[3].style.left = (img3L - 8.5).toString() + "px"
img[3].style.width = (img3W + 2).toString() + "px"
img[4].style.height = (img4H + 1).toString() + "px"
img[4].style.left = (img4L - 6.5).toString() + "px"
img[4].style.width = (img4W + 1.5).toString() + "px"
img[5].style.height = (img5H + 2).toString() + "px"
img[5].style.left = (img5L - 5).toString() + "px"
img[5].style.width = (img5W + 3).toString() + "px"
//alert(img[1].style.width)
if(i>19){
clearInterval(hide)
reset()
roll('r')
isRunning = 'false'
}
}
function left(){
i++
var img0H = parseFloat(img[0].style.height)
var img0W = parseFloat(img[0].style.width)
var img0L = parseFloat(img[0].style.left)
var img1H = parseFloat(img[1].style.height)
var img1W = parseFloat(img[1].style.width)
var img1L = parseFloat(img[1].style.left)
var img2H = parseFloat(img[2].style.height)
var img2W = parseFloat(img[2].style.width)
var img2L = parseFloat(img[2].style.left)
var img3H = parseFloat(img[3].style.height)
var img3W = parseFloat(img[3].style.width)
var img3L = parseFloat(img[3].style.left)
var img4H = parseFloat(img[4].style.height)
var img4W = parseFloat(img[4].style.width)
var img4L = parseFloat(img[4].style.left)
var img5H = parseFloat(img[5].style.height)
var img5W = parseFloat(img[5].style.width)
var img5L = parseFloat(img[5].style.left)
//解决IE兼容性问题
if(navigator.userAgent.indexOf("MSIE")>0 &&i%2==0) {
img0W = img0W + 1
img1H = img1H + 1
img1L = img1L + 1
img2H = img2H + 1
img2L = img2L + 1
img3L = img3L + 1
img3W = img3W + 1
}
img[0].style.height = (img0H + 1).toString() + "px"
img[0].style.left = (img0L + 5).toString() + "px"
img[0].style.width = (img0W + 1.5).toString() + "px"
img[1].style.height = (img1H + 1.5).toString() + "px"
img[1].style.left = (img1L + 6.5).toString() + "px"
img[1].style.width = (img1W + 2).toString() + "px"
img[2].style.height = (img2H - 1.5).toString() + "px"
img[2].style.left = (img2L + 8.5).toString() + "px"
img[2].style.width = (img2W - 2).toString() + "px"
img[3].style.height = (img3H - 1).toString() + "px"
img[3].style.left = (img3L + 6.5).toString() + "px"
img[3].style.width = (img3W - 1.5).toString() + "px"
img[4].style.height = (img4H - 2).toString() + "px"
img[4].style.left = (img4L + 5).toString() + "px"
img[4].style.width = (img4W - 3).toString() + "px"
img[5].style.height = (img5H + 2).toString() + "px"
img[5].style.left = (img5L + 5).toString() + "px"
img[5].style.width = (img5W + 3).toString() + "px"
//alert(img[1].style.left)
if(i>19){
clearInterval(hide)
reset()
roll('l')
isRunning = 'false'
}
}
var isRunning
function move(direction){
//alert(isRunning)
if(isRunning != 'udefined' &&isRunning == 'true')
return
frequency = 20
if(navigator.userAgent.indexOf("MSIE")>0) {
frequency = 15
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
frequency = 20
}
i = 0
if(direction == 'r'){
cur = cur + 1
img[5].style.left = "640px"
hide = setInterval("right()", frequency)
isRunning = 'true'
}
if(direction == 'l'){
cur = cur - 1
img[5].style.left = "-90px"
var pos = position - 1
if(pos <0)
pos = pos + ad.length
img[5].src = ad[pos].Photo
hide = setInterval("left()", frequency)
isRunning = 'true'
}
if(cur >(ad.length - 1))
cur = 0
if(cur <0)
cur = ad.length - 1
//alert(cur)
adname.href = ad[cur].url
if(navigator.userAgent.indexOf("Firefox")>0){
adname.textContent = ad[cur].name
adtel.textContent = ad[cur].phone
adaddr.textContent = ad[cur].address
adprice.textContent = ad[cur].price
adtime.textContent = ad[cur].time
} else {
adname.innerText = ad[cur].name
adtel.innerText = ad[cur].phone
adaddr.innerText = ad[cur].address
adprice.innerText = ad[cur].price
adtime.innerText = ad[cur].time
}
}
function moveC(direction){
if(isRunning != 'true'){
move(direction)
clearInterval(movec)
}
}
function moveD(direction){
move(direction)
if('r' == direction){
movec = setInterval("moveC('r')",5)
} else {
movec = setInterval("moveC('l')",5)
}
}
function reset(){
img[0].style.width = "70px"
img[0].style.height = "50px"
img[0].style.left = "10px"
img[1].style.width = "100px"
img[1].style.height = "75px"
img[1].style.left = "110px"
img[2].style.width = "140px"
img[2].style.height = "105px"
img[2].style.left = "240px"
img[3].style.width = "100px"
img[3].style.height = "75px"
img[3].style.left = "410px"
img[4].style.width = "70px"
img[4].style.height = "50px"
img[4].style.left = "540px"
img[5].style.width = "10px"
img[5].style.height = "10px"
img[5].style.left = "-90px"
}
autoplay = setInterval("move('r')",2000)
function openNewPage(){
window.open(ad[cur].url)
}
</script>
<!-- 滚动房源广告结束 -->
</body>
</html>
