您的位置:

js特效代码,js特效代码显示时钟

js特效代码,js特效代码显示时钟

更新:

本文目录一览:

什么是JS特效

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

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

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

扩展资料:

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

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

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

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 = ''; 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 = 0; i val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else 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仓库地址:

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

JS特效代码,让网页打开时候最小化,6秒后最大化。追加100分

object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"

param name="Command" value="Minimize"/object

input type=button value=最小化 onclick=hh1.Click()

这个你可以试试。但只针对ie,其他的多标签浏览器似乎不能实现

当单击按钮时 显示搜索框,当再次单击按钮时隐藏搜索框,默认在页面搜索框是隐藏的,求Js特效代码

script

function change() {

            var divDisp = document.getElementById("search").style.display;

            if (divDisp == "block") {

                document.getElementById("search").style.display = "none";

            } else {

                document.getElementById("search").style.display = "block";

            }

        }

/script

body

input id="btnChange" type="button" onclick="change();" value="点我改变"/

div id="search" style="display:none"

input id="searchText" type="text" /

/div

/body

js特效代码,js特效代码显示时钟

本文目录一览: 1、什么是JS特效 2、前端开发中常用到的js特效有哪些 3、JS特效代码,让网页打开时候最小化,6秒后最大化。追加100分 4、当单击按钮时 显示搜索框,当再次单击按钮时隐藏搜索框,

2023-12-08
钟表js代码,js数字时钟代码

本文目录一览: 1、网页上不断监听当前时间,然后判断时间段的js代码要怎么写? 2、JAVASCRIPT怎么样制作动态时间显示,给我代码也可以,谢谢啦 3、如何使用JS实现一个简易数码时钟 4、js

2023-12-08
代码时钟js文件,js数字时钟代码

本文目录一览: 1、如何使用JS实现一个简易数码时钟 2、html时钟代码怎么分解成.js文件的形式 3、js动态数字时钟代码请教 如何使用JS实现一个简易数码时钟 设计思路:数码时钟即通过图片数字来

2023-12-08
java特效代码,js代码特效

2022-11-28
js代码特效资源,js特效素材网

2022-11-23
简易js网页实时时钟日历,js电子时钟代码

本文目录一览: 1、如何使用JS实现一个简易数码时钟 2、求一款js做的时间日历控件? 3、怎样在jsp页面中显示日历(高手帮下忙啦!很急) 4、用js在网页上显示当前日期和时间,并显示是星期几 5、

2023-12-08
js简单效果代码(js案例特效大全)

本文目录一览: 1、简单的js代码编程 2、JS效果代码 3、js网页打字机效果代码? 4、急!急!急!求一段简单的JS代码 5、关于Javascript 特效代码 6、求一个简单的点击图片放大缩小的

2023-12-08
js效果源码集合下载(js特效代码下载)

本文目录一览: 1、求js读取数据库数据显示在页面上的表中的功能源码 2、怎么把一个网页的js代码下载 下来啊 3、如何使用js实现页面下载功能 4、如何下载js文件 5、怎么样下载js 6、下载的j

2023-12-08
js特效记录上次登录时间代码,js特效记录上次登录时间代码怎

本文目录一览: 1、用户第一次进入网站,如何用JS来保存进入的时间? 2、js如何获取cookie第一次登录时间 3、如何用JS代码来写出每次系统登陆的时候,平台日志就会记录你的所有操作和登陆时间?

2023-12-08
js代码整洁随笔,js代码整理

本文目录一览: 1、如何在页面让JavaScript代码原样显示,用标签不起用,js照常运行。请看问题补充 2、怎么让JS文件代码对齐 3、怎么样格式化javascript,怎么样格式化js 4、为什

2023-12-08
js时钟代码是什么(前端时钟代码)

本文目录一览: 1、如何用javascript实现一个时钟? 2、关于网页调用系统时间JS代码 3、JS中获取当前时间的代码是什么? 4、js时间代码 5、js获得当前日期和时间的代码是什么? 如何用

2023-12-08
web代码较少的js特效(网页js特效)

本文目录一览: 1、jq特效和js特效区别 2、JS特效代码,让网页打开时候最小化,6秒后最大化。追加100分 3、前端开发中常用到的js特效有哪些 4、网页特效代码 5、什么是JS特效 jq特效和j

2023-12-08
网站鼠标特效js代码(网站鼠标点击特效)

本文目录一览: 1、请教网页设计高手鼠标特效代码代码求大神帮助 2、求 js 特效,鼠标滑过,显示浮层 3、在html中怎么用js实现鼠标指向图片时图片放大的效果?(具体实现) 请教网页设计高手鼠标特

2023-12-08
js图片转动代码(图片切换js特效代码)

本文目录一览: 1、javascript让图片移动的函数 2、JS控制图片向左向右移动的代码 3、js实现图片旋转效果 4、js 怎么实现点击一次图片旋转90度,再点击再转90度呢 5、JavaScr

2023-12-08
经典效果js源码,源代码特效

本文目录一览: 1、问下在哪有js特效的源码那些,怎么弄? 2、看有些网站的jquery和js的效果比较好,如何能看到这些js的源码的?谢谢指教 3、用js源码做出缓动效果,关于for循环和setti

2023-12-08
网页桌面js特效代码,网页javascript特效

本文目录一览: 1、JS特效代码,让网页打开时候最小化,6秒后最大化。追加100分 2、前端开发中常用到的js特效有哪些 3、浏览器怎么设置启用显示javascript代码JS效果 4、什么是JS特效

2023-12-08
7栏js焦点图代码(js焦点图特效)

本文目录一览: 1、Jquery.SuperSlide扩展效果里的实用焦点图效果代码,求大神,谢谢 2、js焦点图代码怎么用啊? 3、什么是焦点图 4、js焦点图切换图片的数字按钮代码怎么写?要有鼠标

2023-12-08
js图片时钟实例,js图片时钟实例图

本文目录一览: 1、JS,时钟案例 2、如何使用JS实现一个简易数码时钟 3、js Canvas实现的日历时钟案例有哪些 4、一个JS的简单时钟程序 5、javascript,实现一个时钟,页面显示当

2023-12-08
时间显示js代码(时间显示js代码怎么设置)

本文目录一览: 1、关于JavaScript显示时间的一段简单代码! 2、js显示当前时间 3、js时间代码 关于JavaScript显示时间的一段简单代码! htmlbody script lang

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08