开发工具与关键技术:DW /js;
作者:多事之秋
撰写时间:2019年2月18日
因为某些原因,撰写时间和发表时间不一致,请原谅;
用简单代码做一个做用js放大小说字体
效果如下:
首先创建一个 html
<div id="wrap">
<div class="text" id="text">
<p id="p_one">鼠标点击文字放大可以用作小说,文字的放大效果</p>
</div>
<form >
<input type=button value="A-" onClick="A_one()">
<input type="text" name="box" id="box" value="16" size=4>
<input type=button value="A+" onClick=" A_two()" >
</form>
</div>
然后添加元素属性,CSS代码为:
@charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
}
.text{
width: 200px;
height: 100px;
color: #fff;
font-size: 16px;
padding: 16px;
background: #19ABB7;
}
#p_one{
display: block;
position: relative;
}
#p_two{
display: block;
}
input{
text-align: center;
}
#wrap input:nth-child(1),#wrap input:nth-child(3){
width: 50px;
}
Js代码为:
<script>
var Size=16;
var BoxSize=document.getElementById("box");
var Box=document.getElementById("box").value;
var text=document.getElementById("text");
function A_one(){
if(Size===15){
return;
}
else{
Size--;
BoxSize.value=Size;
text.style.fontSize=Size+"px";
}
};
function A_two(){
if(Size===22){
return;
}
else{
Size++;
BoxSize.value=Size;
text.style.fontSize=Size+"px";
}
};
</script>