关于Javascript 特效代码

2023-02-19 03:51:02JavaScript010

关于Javascript 特效代码,第1张

<!-- Hide the script from old browsers --

function compute(obj) //定义一个函数名字叫compute 他接收了一个参数 obj

{obj.expr.value = eval(obj.expr.value)} //当前的参数的值和下文参数值所用的方法相同

var one = '1' //定义一个字符型的1

var two = '2' //定义一个字符型的2

var three = '3' //定义一个字符型的3

var four = '4' //定义一个字符型的4

var five = '5' //定义一个字符型的5

var six = '6' //定义一个字符型的6

var seven = '7' //定义一个字符型的7

var eight = '8' //定义一个字符型的8

var nine = '9' //定义一个字符型的9

var zero = '0' //定义一个字符型的0

var plus = '+' //定义一个字符型的+

var minus = '-' //定义一个字符型的*

var multiply = '*' //定义一个字符型的*

var divide = '/' //定义一个字符型的/

var decimal = '.' //定义一个字符型的.

function enter(obj, string) //定义一个函数名字叫enter 他接收了一个参数 obj

{obj.expr.value += string} //让 obj的值加上 '+'后面的值

function clear(obj) //定义一个函数名字叫clear 他接收了一个参数 obj

{obj.expr.value = ''} //让obj的值等于空

// --End Hiding Here -->

</script>

<td><input type="button" value=" 7 " onClick="enter(this.form, seven)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" 8 " onClick="enter(this.form, eight)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" 9 " onClick="enter(this.form, nine)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" / " onClick="enter(this.form, divide)"><!--当鼠标点

击按钮的时候提交给函数按钮中的值-->

<tr><td><input type="button" value=" 4 " onClick="enter(this.form, four)"><!--当鼠标

点击按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" 5 " onClick="enter(this.form, five)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" 6 " onClick="enter(this.form, six)"><!--当鼠标点击按

钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" * " onClick="enter(this.form, multiply)"><!--当鼠标

点击按钮的时候提交给函数按钮中的值-->

<tr><td><input type="button" value=" 1 " onClick="enter(this.form, one)"><!--当鼠标点

击按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" 2 " onClick="enter(this.form, two)"><!--当鼠标点击按

钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" 3 " onClick="enter(this.form, three)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" - " onClick="enter(this.form, minus)"><!--当鼠标点

击按钮的时候提交给函数按钮中的值-->

<tr><td colspan=2><input type="button" value=" 0 " onClick="enter

(this.form, zero)">

<td><input type="button" value=" . " onClick="enter(this.form, decimal)"><!--当鼠标

点击按钮的时候提交给函数按钮中的值-->

<td><input type="button" value=" + " onClick="enter(this.form, plus)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->

<tr><td colspan=2><input type="button" value=" = " onClick="compute(this.form)"><!

--提交表单在javascript中进行运算-->

<td colspan=2><input type="button" value="AC" size= 3 onClick="clear(this.form)"><!--

点击此按钮调用此函数-->

</table>

</form>

HTML5 DOM 选择器

// 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

验证码倒计时代码

<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 {