js 特效(小程序js特效)

七月网2023年12月24日 10:485100

一、javascript常用的特效有哪些

一种由Netscape的LiveScript发展而来的脚本语言，它提高与Java的兼容性。JavaScript采用HTML页作为其接口

js 特效(小程序js特效)

Javascript加入网页有两种方法：

这是最常用的方法，大部分含有Javascript的网页都采用这种方法，如：

document.writeln("这是Javascript！采用直接插入的方法！");

在这个例子中，我们可看到一个新的标签：<script>……</script>，而<script language="Javascript”>用来告诉浏览器这是用Javascript编写的程序，需要调动相应的解释程序进行解释。

HTML的注释标签：用来去掉浏览器所不能识别的Javascript源代码的，这对不支持 Javascript语言的浏览器来说是很有用的。

//-Javascript结束：双斜杠表示 Javascript的注释部分，即从//开始到行尾的字符都被忽略。至于程序中所用到的document．write（）函数则表示将括号中的文字输出到窗口中去，这在后面将会详细介绍。另外一点需要注意的是，<script>……</script>的位置并不是固定的，可以包含在< head>......</head>或<body>.....</body>中的任何地方。

2、引用方式如果已经存在一个Javascript源文件（以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：

其中的Url就是程序文件的地址。同样的，这样的语句可以放在HTML文档头部或主体的任何部分。如果要实现“直接插入方式”中所举例子的效果，可以首先创建一个Javascript源代码文件“Script.js”，其内容如下：

document.writeln("这是Javascript！采用直接插入的方法！");

在网页中可以这样调用程序：<script src＝"Script.js" language="Javascript"></script>。

二、什么是JS特效

1、JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。

2、比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。

3、JavaScript是根据"ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA组织发展和维护。ECMA-262是正式的 JavaScript标准。

4、能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表）。

5、JavaScript使网页增加互动性。JavaScript使有规律地重复的HTML文段简化，减少下载时间。JavaScript能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI验证。JavaScript的特点是无穷无尽的，只要你有创意。

三、前端开发中常用到的js特效有哪些

// 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方法阻止默认行为

}, false);// jQuery$('#btn').on('click', function(event){ event.preventDefault();

//原生jsdocument.getElementById('btn').addEventListener('click', function(event){ event= event|| window.event； if(event.stopPropagation){// w3c方法阻止冒泡

}, false);// jQuery$('#btn').on('click', function(event){ event.stopPropagation();

$('#content').on("mousewheel DOMMouseScroll", function(event){

var delta=(event.originalEvent.wheelDelta&&(event.originalEvent.wheelDelta> 0? 1:-1))||(event.originalEvent.detail&&(event.originalEvent.detail> 0?-1: 1));

console.log('mousewheel top');

} else if(delta< 0){//向下滚动

console.log('mousewheel bottom');

var SVG_NS='http://www.w3.org/2000/svg'; return!!document.createElementNS&&!!document.createElementNS(SVG_NS,'svg').createSVGRect;

//测试console.log(isSupportSVG());1234567

if(document.createElement('canvas').getContext){ return true;

}//测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas());12345678910

var ua= navigator.userAgent.toLowerCase();

if(ua.match(/MicroMessenger/i)=="micromessenger"){

}//测试alert(isWeiXinClient());1234567891011

$('#myImage').click(function(event){

console.log('X：'+ event.offsetX+'\n Y:'+ event.offsetY);

console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);

<input id="send" type="button" value="发送验证码">12

//原生js版本var times= 60,//临时设为60秒

document.getElementById('send').onclick= function(){

timer= setInterval(function(){

send.value='发送验证码';

send.value= times+'秒后重试';

}1234567891011121314151617181920

$('#send').on('click', function(){

timer= setInterval(function(){

$this.val('发送验证码');

$this.attr('disabled', false);

$this.val(times+'秒后重试');

$this.attr('disabled', true);

});12345678910111213141516171819202122

/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/

//匹配双字节字符(包括汉字在内)

/[^\x00-\xff]/1234567891011121314151617181920

var y= now.getFullYear(); var m= now.getMonth()+ 1;//注意js里的月要加1

var d= now.getDate(); var h= now.getHours();

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= 0; i< val.length; i++){ if(val[i].match(/[^\x00-\xff]/ig)!= null) byteValLen+= 2; else byteValLen+= 1; if(byteValLen> max) break;

$('#txt').on('keyup', function(){

var val= this.value; if(val.replace(/[^\x00-\xff]/g,"**").length> 14){ this.value= getByteVal(val, 14);

});12345678910111213141516171819

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