js按钮特效代码（js按钮特效代码怎么用）[20240423更新]

今天给各位分享js按钮特效代码的知识，其中也会对js按钮特效代码怎么用进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、js动画效果代码方法
• 2、关于Javascript 特效代码
• 3、用js写 有六个按钮点击按钮会变色 然后其他按钮恢复原来的颜色
• 4、手机移动端美化弹窗提示确认框js特效代码

js动画效果代码方法

1.toggle():

toggle()方法除了模拟鼠标连续单击事件之外，同时会动态的隐藏改变当前元素的高度，宽度和不透明度，最终切换当前元素的可见状态。如果元素可见，则切换隐藏状态，如元素隐藏，切换可见状态

2.fadeln()与fadeOut();

这两个方法，实现了淡入和淡出的一个动画效果，fadeln（）渐显效果，fadeout（）渐隐效果，两者结合使用，可把元素隐藏在按钮中，在通过点击事件显示，两方法只改变元素的透明度，不修改其他属性

3.fadeToggle();

此方法会动态的改变当前元素的透明度，最终却换当前元素的可见状态。如果元素是可见的，则通过淡出效果切换隐藏；如果元素是隐藏的，则通过淡入效果切换可见状态，不设置参数时，默认0.4秒内发生淡入与淡出的动画效果

4.fadeTo() ;

fadeln()与fadeOut()方法都是渐隐渐显，透明度从1到0，从0到1实现一个渐隐渐显效果，而fadeToggle()方法则是可以控制1-0的透明度，为更好展示透明度的效果，可在页面中创造一个下拉框，用于保存透明度值，操作下拉框去控制图片透明度值

5.slideDown(); 与 slideUp() ;

slideDown()可改变元素高度，呈现一个滑动效果，由上往下滑动，直到显示最终的当前元素，slideUp（）相反，由下往上滑动，直到隐藏最终的当前元素

6.slideToggle();

slideToggle()方法跟slideDown(); 与 slideUp() ;两个方法有异曲同工之妙，同样可改变元素的高度，不同于slideDown(); 与 slideUp() ; 的效果， 这个方法是通过点击事情控制元素的隐藏和显示

7.animate() ;

这个方法是自定义动画效果的方法，高度，宽度，透明度，运行速度都是可通过自定义给属性，这个方法只能改变可以取数字值的css属性，如：大小，边框，内外边距，定位，字体，文本，背景，透明度。

8.stop() ;

停止动画，stop（）方法能结束当前的动画，并立即进入到下一个动画。

关于Javascript 特效代码

script language="JavaScript"

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

form name="calc"

table border=1

td colspan=4input type="text" name="expr" size=30 action="compute(this.form)" tr

!--提交表单--

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

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

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

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

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

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

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

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

trtdinput type="button" value=" 4 " onClick="enter(this.form, four)"!--当鼠标

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

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

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

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

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

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

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

trtdinput type="button" value=" 1 " onClick="enter(this.form, one)"!--当鼠标点

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

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

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

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

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

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

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

trtd colspan=2input type="button" value=" 0 " onClick="enter

(this.form, zero)"!--当鼠标点击按钮的时候提交给函数按钮中的值--

tdinput type="button" value=" . " onClick="enter(this.form, decimal)"!--当鼠标

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

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

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

trtd colspan=2input type="button" value=" = " onClick="compute(this.form)"!

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

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

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

/table

/form

用js写 有六个按钮点击按钮会变色 然后其他按钮恢复原来的颜色

可以使用js的css方法实现点击按钮会变色，然后其他按钮恢复原来的颜色。

具体步骤如下：

需要准备的材料分别是：电脑、浏览器、ultraedit。

1、在ue编辑器中新建一个空白的html文件，js文件。

2、在ue编辑器中输入以下html代码。

3、在ue编辑器中输入以下js代码。

4、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。

5、在浏览器中打开此html文件，可以看到最终想要点击按钮会变色，然后其他按钮恢复原来的颜色效果。

手机移动端美化弹窗提示确认框js特效代码

script type="text/javascript"

$(function(){

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

webToast("恭喜您，修改成功恭喜您，修改成功恭喜您修改成功恭喜您","middle",3000);

  });

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

popTipShow.alert('弹窗标题','自定义弹窗内容，居左对齐显示，告知需要确认的信息等', ['知道了'],

function(e){

  //callback 处理按钮事件  

  var button = $(e.target).attr('class');

  if(button == 'ok'){

//按下确定按钮执行的操作

//todo ....

this.hide();

  }

}

);

  });

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

popTipShow.confirm('弹窗标题','自定义弹窗内容，居左对齐显示，告知需要确认的信息等',['确 定','取 消'],

function(e){

  //callback 处理按钮事件

  var button = $(e.target).attr('class');

  if(button == 'ok'){

//按下确定按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("操作成功","top", 2000);

}, 300);

  }

  if(button == 'cancel') {

//按下取消按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("您选择“取消”了","bottom", 2000);

}, 300);

  }

}

);

  });

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

var html = "label姓名：input class='confirm_input' placeholder='请输入'/label";

popTipShow.confirm('弹窗标题',html,['确 定','取 消'],

function(e){

  //callback 处理按钮事件

  var button = $(e.target).attr('class');

  if(button == 'ok'){

if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){

webToast("姓名不能为空！","bottom", 3000);

return;

}

this.hide();

setTimeout(function() {

webToast($(".confirm_input").val(),"bottom", 3000);

}, 300);

//按下确定按钮执行的操作

//todo ....

  }

  if(button == 'cancel') {

//按下取消按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("您选择“取消”了","top", 2000);

}, 300);

  }

}

);

  });

});

/script

关于js按钮特效代码和js按钮特效代码怎么用的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。