本文实例讲述了JS基于递归实现倒计时效果的方法。分享给大家供大家参考，具体如下：事件：//发送验证码 $(.js-sms-code).click(function(){$(this).attr("disabled", "disabled").html("<span style=color:#666><span id=countdown>60</span>s 后再试</span>");countdown();var tel = $(#tel).val();$.ajax({url: "{sh::U(Home/sendSmscode)}",type:POST,dataType:"json",data: {tel: tel},success: function() {},error: function...
本文实例分析了JS两种类型的表单提交方法。分享给大家供大家参考，具体如下：1.原始的<form method="post" action="/student/stureg/add" id="form1" onsubmit="return subForm();"> <button type="submit" class="button red" style="font-size:18px; font-family:微软雅黑;">提 交</button>这里的button提交之后，执行subForm()方法，subForm可以对表单进行验证，返回false，表单不提交。否则提交。function subForm() {var flag...
轮播图效果:html<template><div class="shuffling"><div class="fouce fl"><div class="focus"><ul class="showimg"><template v-for=sd in shufflingData><li v-if=shufflingId==$index v-on:mouseover=showPreNext v-on:mouseout=hiddenPreNext><a target="_blank" title="{{sd.title}}" class="img" href="{{sd.href}}"><img alt="{{sd.title}}" v-bind:src="sd.url"/></a><h3><a target="_blank" title="{{sd.title}}" href="{...
在使用PDFObject.js时，由于后台需要转换数据，在前台显示的时候，有很长一段时间显示空白页面，所以想到写一个假的加载动画script片段：<script type="text/javascript"> var bar = 0; var line = "||" ; var amount ="||" ; function count(){ bar= bar+2 ; amount =amount + line; $("#chart").val(amount); $("#percent").val(bar+"%"); if (bar<99){ //设置1.5秒循环一次 setTimeout("count()",150); }else{ $("#befor...
今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦。调用示例:<template> <div class="tabs-contents"> <!-- 调用tabs组件 --><tabs :flag.sync=tabsShowFlag :navtitle=navTitle :navdata=navData><div class="tabs-body"><div v-if=navData[0].showFlag>0><div class="one-content"><p>二十国集团领导人第十一次峰会将于9月4日至5...
JavaScript可以模拟打字效果，很有创意的一个小脚本，可以用作404页面，当然也可以用在很多地方。先把需要打印的字符串预先保存到一个数组当中，然后利用setTimeout()方法每个一小段时间输出一个字符，连串起来就像打字一样的效果。Code<script type="text/javascript"> <!-- var tl = new Array("I am so sorry, but I cant find the Page youve requested.","Its possible that you entered the address incorrectly.","If you d...
大家在使用Dreamweaver中的时间线功能或以做出很有趣的动画效果，Dreamweaver会自动为用户生成特定的程序代码，大家有没有想过动画的实现原理呢？其实原理是很简单的，主要是使用了一个计时器函数，下面我为大家演示一个简单的动画的制作过程，通过有关的介绍，大家可以举一反三，做出更多很炫的动画效果。 这个实例的效果是点击网页上的“开始移动”按钮，则其中的指定图层就会从左到右移动，在这个过程中你点击“停止移动”按...
//遮罩 function coverDiv(){ var procbg = document.createElement("div"); //首先创建一个div procbg.setAttribute("id","mybg"); //定义该div的id procbg.style.background = "#000000"; procbg.style.width = "100%"; procbg.style.height = "100%"; procbg.style.position = "fixed"; procbg.style.top = "0"; procbg.style.left = "0"; procbg.style.zIndex = "500"; procbg.style.opacity = "0.6"; procbg.styl...
这是我用原生js写的放大镜效果，与各种各样的框架技术相比，我喜欢使用原生的js，在这里，想和大家一起谈谈原生和框架技术的理解与个人喜好。js放大镜效果*{ margin:0px; padding:0px; border:none; list-style:none; } #box{ margin:80px auto; width: 352px; } #box p { width: 350px; height: 350px; border: 1px solid #ddd; margin-bottom: 5px; } #box p img { width:350px; height:350px; } #box h1 { width: 352px; heigh...
现在很多网站不仅是介绍，更多的是有一些功能，怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现，它是一个轻量级的jQuery插件，它可以帮助我们创建一个遮罩引导层，实现页面功能引导功能，引导完成显示页面内容。html代码：欢迎来到网页引导示例DEMO演示页 页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。 点击下一步了解更多... 这里是网站LOGO，点击这里可以直...
本文实例讲述了JavaScript实现广告的关闭与显示效果。分享给大家供大家参考。具体实现方法如下：js代码部分如下：html部分如下： 换客网广告...关闭 希望本文所述对大家的javascript程序设计有所帮助。
源代码如下：正在载入效果图：
本文实例讲述了JS实现的网页倒计时数字时钟效果。分享给大家供大家参考。具体实现方法如下：javascript实现的倒计时时钟body,div{margin:0;padding:0;} body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;} #countdown{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;} input{border:0;width:283px;height:50px;cursor:pointer;margin-top:20px;background:url(http://www.gxlcms.com/jscs...
对于H5来说，canvas可以说是它最有特色的一个地方了，有了它之后我们可以随意的在网页上画各种各样的图形，做一些小游戏啊什么的。canvas这个标签的用法，在网上也有特别多的教程了，这里就不作介绍了。今天我们就用canvas来做一个小小的时钟。完整的代码在这里https://github.com/wwervin72/HTML5-Clock。那么首先在这个页面里面我使用了两个canvas，一个用来绘制静态的时钟表盘和刻度，另一个用来绘制时钟的三个指针，然后用定位...
最近做了一个项目，其中有需求要实现下雨小雪的动画特效，所以在此做了个drop组件，来展现这种canvas常见的下落物体效果。在没给大家介绍正文之前，先给大家展示下效果图： 展示效果图： 下雨 下雪看起来效果还是不错的，相对于使用创建dom元素来制作多物体位移动画， 使用canvas会更加容易快捷，以及性能会更好调用代码Document#canvas{ width:100%; height: 100%; }canvasDrop.init({ type: "rain", // drop类型，有rain or snow...