澳门威尼斯人网站JavaScript落到实处点击开关直接打印

by admin on 2019年9月5日

挂号的时候供给发送验证激活帐号的邮件,为了制止邮件的多次重复发送,所以能够在点击了发送后,设置button要过一段时间能力继续点击。上面是八个简约的事例:

众多网址都有此功用,当浏览到底层时都会有一个打字与印刷开关,点击打字与印刷开关就足以成功打字与印刷功效,作用极度不利,人性化,代码极度的简练。

点击按键复制当前网站:

本文给大家享受js落成点击按键字体放大裁减实例代码,代码轻便易懂,须要的意中沙仿效下吧

点击回车达成按键点击功用,回车达成按键点击

点击回车完毕开关点击效率:
在骨子里行使中,也许有如此的必要,点击两个按键能够实施多少个效果与利益,当点击回车的时候也得以兑现此成效,相当于说点击回车的时候也触发的点击事件,下边就经过代码实例介绍一下怎样贯彻此效率。
代码如下:

 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
#thediv{ 
  width:100px;
  height:100px;
  background-color:red;
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  $("#bt").click(function(){
    $("#thediv").css("background-color","blue");
  }) 
  $(document).keydown(function(e){
    if (!e) 
      e = window.event; 
    if ((e.keyCode || e.which) == 13) { 
      $("#bt").click(); 
    } 
  })
});
</script>
</head>
<body>
<div id="thediv"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

 

以上代码达成了我们的须要,点击开关或然点击回车都足以将div的背景象设置为樱桃红。
连锁阅读:
1.click事变能够参照jQuery的click事件一章节。
2.css()函数能够参照jQuery的css()方法一章节。  
3.keydown事件能够参照jQuery的keydown事件一章节。 
4.keyCode属性能够参阅javascript的keyCode属性一章节。
5.wihich属性能够参照jQuery的event.which属性一章节。 

原稿地址是:

越多内容能够参见:

 

点击回车达成开关点击功效:
在实际应用中,也有这么的须求,点击贰个按键能够施行一…

<html> 
<head> 
<title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title> 
</head> 
<body> 
<input type="button" id="btn" value="免费获取验证码" /> 
<script type="text/javascript"> 
var wait=60; 
function time(o) { 
        if (wait == 0) { 
            o.removeAttribute("disabled");           
            o.value="免费获取验证码"; 
            wait = 60; 
        } else { 
            o.setAttribute("disabled", true); 
            o.value=wait+"秒后可以重新发送"; 
            wait--; 
            setTimeout(function() { 
                time(o) 
            }, 
            1000) 
        } 
    } 
document.getElementById("btn").onclick=function(){time(this);} 
</script> 
</body> 
</html> 
<a href="javascript:window.print()">脚本之家</a> 

在大方的网址都有这么的意义,当点击八个开关的时候可以复制当前页面包车型地铁地方,以此能够方便网站客户对链接的积累,同一时候也造福网址的放大,下边就结成实例介绍一下如何兑现此作用:

切切实实代码如下所示:

 

也等于假设调用window.print()函数就足以兑现打印当前页面。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>脚本之家</title>
</head>
<body>
<input type="button" name="button" value="复制本页标题和网址,推荐给您的好友"><br><br>
<script type="text/javascript">
function softwhy() {
 var clipBoardContent = "";
 clipBoardContent += document.title;
 clipBoardContent += "\n";
 clipBoardContent += this.location.href;
 window.clipboardData.setData("Text", clipBoardContent);
 alert("脚本之家提示:复制成功!");
}
</script>
</body>
</html> 
<style>
.bb{color:red;}
.cc{color:green;}
.chapter {font-size: 1.5em;}
.normal{font-size:12px;}
.hidden{display:none;}
</style>
<script>
$(document).ready(function() {
$('div.aa').addClass('bb');
$('a[href^="http:"]').addClass('cc');
//$('#switcher-large').on('click',function(){
// $('div.large').addClass('chapter'); 
//});
$('#switcher-large').click(function(){ 
$('div.large').toggleClass('chapter');
$(this).toggleClass('bb'); 
});
//$('#switcher').click(function(){//点击按钮增加(移除)样式(toggleClass方法)
//$('#switcher button').toggleClass('hidden');
//})
//字体的放大缩小
var $biger = $('div.large');
var num = parseFloat($biger.css('fontSize')); 
$('#switcher-bigger').click(function(){ 
num=num*1.4;
$biger.css('fontSize',num+'px');
});
$('#switcher-small').click(function(){
num=num/1.4;
$biger.css('fontSize',num+'px');
});
});
</script>
<div id="switcher" class="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default"> Default </button>
<button id="switcher-hidden">Narrow hidden</button>
<button id="switcher-large">Large Print</button>
<button id="switcher-bigger">switcher-bigger</button>
<button id="switcher-small">switcher-small</button>
</div>
<div class="large">
<p>脚本之家</p>
<p>脚本之家</p>
<p>脚本之家</p>
<p>脚本之家</p>
</div>

不过上边包车型大巴并不完善,因为某些网页上的看不尽内容都无需打字与印刷,下边介绍一下什么打字与印刷页面中的钦命内容。

上述代码能够在点击按键实现复制当前链接的效用,可是令人缺憾的是唯有IE浏览器帮衬此成效。以上代码也很粗大略,有哪个地方不精晓的招待提议,感激。!

有关JavaScript完成点击按键字体放大、裁减的有关知识就给大家介绍这么多,希望对大家持有支持!

代码如下:

你大概感兴趣的稿子:

  • JavaScript+Html5完成按键复制文字到剪切板功能(手提式有线电话机网页包容)
  • JavaScript完成点击按键复制钦定区域文本(推荐)
  • 开关JS复制文本框和表格的代码
  • 创立二个复制UBB软件音信的链接或按键的js代码
  • js+html5实现复制文字按键

你只怕感兴趣的篇章:

  • js调用打字与印刷机打字与印刷网页字体总是减弱一号的消除措施
  • js完结活动端微信页面禁止字体放大
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>指定被打印的内容</title>
<script language="javascript"> 
function printdiv(printpage) 
{ 
var newstr = printpage.innerHTML; 
var oldstr = document.body.innerHTML; 
document.body.innerHTML =newstr; 
window.print(); 
document.body.innerHTML=oldstr; 
return false; 
} 
window.onload=function()
{
var bt=document.getElementById("bt");
var div_print=document.getElementById("div_print");
bt.onclick=function()
{
printdiv(div_print);
}
}
</script> 
</head> 
<body> 
<div id="div_print"> 
<h1 style="Color:Red">这是要被打印的内容</h1> 
</div>
<div style="Color:Red">欢迎您</div> 
<input name="print" type="button" id="bt" value="点击打印" /> 
</body> 
</html> 

特意表明:打字与印刷预览须求将代码复制到本机测量检验,不然会出错。

如上代码达成了打字与印刷网页钦赐内容的效率,上面简介一下兑现进程。

一.完成原理:

在js代码中接纳document.body.innerHTML
=newstr,动态原本body中的内容替换为要打字与印刷的情节,在打字与印刷过后,在将原来的内容还原,原理就是如此轻松,具体能够参照代码注释。

二.代码注释:

1.function
printdiv(printpage){},声圣元(Synutra)个调节打字与印刷的函数,参数是一个对象,那几个指标中的内容就要被打字与印刷。
2.var newstr = printpage.innerHTML; ,获取要打字与印刷的内容。
3.var oldstr = document.body.innerHTML,原来body中的内容。

  1. document.body.innerHTML
    =newstr,用就要打字与印刷的原委替换原本body中的内容。
    5.window.print(),最先打字与印刷。
    6.document.body.innerHTML=oldstr,再将原本body中的内容还原。

三.相关阅读:

1.window.print()函数能够参见window对象的print()情势一章节。
2.onclick事变能够参照javascript的onclick事件一章节。

如上内容相比轻巧,并有单独的代码注释支持我们学习js完成点击开关就打字与印刷效用,希望本文对大家全部辅助。

您可能感兴趣的篇章:

  • JS达成浏览器打字与印刷、打字与印刷预览示例
  • JS调用打印机功效轻易示例
  • 一种基于浏览器的机动小票机打字与印刷落成方案(js版)
  • js
    console.log打字与印刷对像与数组用法详解
  • js怎样打字与印刷object对象
  • js完毕页面打字与印刷作用实例代码(附去页眉页脚效率代码)
  • javascript
    打字与印刷内容措施小结
  • js调控web打字与印刷(局地打字与印刷)方法整理
  • js或jquery达成页面打字与印刷可有的打字与印刷
  • JS达成页面打字与印刷成效

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图