JS实现点击按钮实现文字变大变小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
 window.onload = function(){
  var oBnt1 = document.getElementById(‘bnt1‘);
  var oBnt2 = document.getElementById(‘bnt2‘);
  var oP = document.getElementById(‘text‘);
  var num = 14;
  oBnt1.onclick = function(){
   num --;
   oP.style.fontSize = num+‘px‘;
  }
  oBnt2.onclick = function(){
   num ++;
   oP.style.fontSize = num+‘px‘;
  }

}
</script>
</head>
 
<body>
    <input id="bnt1" type="button" value="-" />
    <input id="bnt2" type="button" value="+" />
    <p id="text">新华网北京11月29日电 中央外事工作会议11月28日至29日在北京召开。会上强调,要高举和平、发展、合作、共赢的旗帜,统筹国内国际两个大局,统筹发展安全两件大事,牢牢把握坚持和平发展、促进民族复兴这条主线,维护国家主权、安全、发展利益,为和平发展营造更加有利的国际环境,维护和延长我国发展的重要战略机遇期,为实现“两个一百年”奋斗目标、实现中华民族伟大复兴的中国梦提供有力保障。</p>
</body>
</html>

时间: 2024-08-03 02:55:06

JS实现点击按钮实现文字变大变小的相关文章

JS实现点击按钮复制指定代码大全

<br><br>一.点击复制文本框内容的代码:<br><br> <script type="text/javascript"> function jsCopy(){ var e=document.getElementById("content");//对象是content e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制

js实现点击按钮实现上一张下一张相册滚动效果

/****判断图片是否构成滚动效果*/$(function(){    if($("#bar").find('img').size()*71<=$("#bar").width()){           $("#table_img").width($("#bar").find('img').size()*71);    }    if($("#bar").find('img').size()*71&g

javascript基础——文字变大变小className的使用及JS浮动的兼容用法

文字变大变小,详情页比较常见的那种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字放大缩小及className的使用</title> <style> #p1{ width: 960px;} .red ,.green{ width:400px; border:5px solid #333;

点击按钮插入文字在文本框

一款实用的网页特效,点击按钮在文本框中插入文字,特别是在一些需要输入文字的地方尤其适用,可减少用户输入的麻烦,只需点击一下对应的按钮,即可把文字插入到文本框的指定位置,不过目前来说,本代码不算完善,有一些小的Bug希望高手们帮忙修正哦. <!doctype html> <html> <head> <title>点击按钮插入文字</title> <script language="javascript"> //移动光

js之图片变大变小效果

1.当鼠标移到图片上,图片变大:当鼠标移出图片,图片变小,效果如图: 2.原理不难,就是鼠标over时,设置一个定时器,让图片逐渐变大,鼠标out时同理,看下最初的简略代码你就会明白: <!DOCTYPE html> <html> <head> <style type="text/css"> div {     width: 200px;           /* 宽度 */     height: 100px;          /* 

JS实现点击按钮,下载文件

PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦.excel啦都是一样) 有两个方法:window.open()和通过form表单来提交. 在线例子:https://hamupp.github.io/gitblog/app/jsBasic/jsButtonDownloadFile/index.html 方法一:window.open("下载文件的后端接口"); *h

js实现点击按钮弹出上传文件的窗口

转自:https://www.jb51.net/article/100916.htm 1.详细描述 在页面上设置一个"选择文件"按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

利用JS实现点击按钮后图片自动切换

我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)<选择>left center right 2.实现上述布局 swap.html <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'><html&

js实现点击按钮显示某个区域 然后点击页面中任意其他位置,隐藏该区域

$(".licat-header-list").on("click",function(e){ $(this).addClass("active");//有class名active时,其下边的ul列表显示,否则隐藏 e.stopPropagation(); $("body").one("click",function(e){ $(".licat-header-list").removeC