onclick 点击事件
onclick 以文字de放大与缩小为实例
嗨… 各位小可爱们,我们又见面了
先来了解一下定义和用法
onclick 属性在单击鼠标时触发。 记住是 单击单击单击!!! 只点击一次即可触发事件
废话不多,直接上代码,希望能对你们有所帮助
<meta charset="utf-8" />
<style type="text/css">
#wrap{
width: 90%;
height: 100%;
margin: 50px auto;
padding: 20px;
font-family: arial;
font-size: 18px;
color: white;
border-radius: 10%;
background-image: radial-gradient(ellipse 100% 100% at center,pink 35%,
lightpink 45%, deeppink 100%);/*设置背景颜色*/
}
#wrap p{
text-indent: 2em;
}
#wrap span{
display: inline-block;
width: 50px;
height: 25px;
background-color: deeppink;
text-align: center;
line-height: 25px;
margin-left: 80px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<span> + </span>
<span> - </span>
<p>我感到难过,不是因为你欺骗了我,而是因为我再也不能相信你了。 ——尼采 </p>
<p>我始终相信,在这个世界上,一定有另一个自己,在做着我不敢做的事,在过着我想过的生活。 ——宫崎骏 </p>
<p>你锋芒毕露,这是你的弱点,你像把无鞘刀,锋利,但好刀应在刀鞘里。 ——黑泽明《剑穿心》 </p>
<p>如果你给我的,和你给别人的是一样的,那我就不要了。 ——三毛 </p>
<p>花朵预兆着果实,少女梦想着爱情。 ——雨果《海上劳工》 </p>
<p>为什么你看到别人眼中有刺,却看不到自己眼中有梁木。 ——《圣经》 </p>
<p>没有不可治愈的伤痛,没有不能结束的沉沦,所有失去的,会以另一种方式归来。——约翰•肖尔斯《许愿树》 </p>
<p>别人帮你,那是情分,不帮你,那是本分。容不容得下是你的气度,能不能让你容下是我的本事。——《甄嬛传》 </p>
<p>一切都明明白白,但我们仍匆匆错过,因为你相信命运,因为我怀疑生活。——顾城《错过》 </p>
<p>我需要,最狂的风,和最静的海。 ——顾城 </p>
<p>没有人愿意被关在笼子里,问题是给你一片无边无际的天空,你是不是真的敢要。 ——江南《此间的少年》 </p>
<p>Is life always this hard,or is it just when you are a kid? </p>
<p>人生总是那么痛苦吗?还是只有小时候是这样? </p>
<p>Always like this. </p>
<p>总是如此。 ——《这个杀手不太冷》 </p>
<p>我一直以为,我没有对不住任何人,但现在我知道,我最对不住的,就是我自己。 ——陈凯歌《无极》 </p>
<p>如谷之歌,扎根土里。与风共存,与种子越冬,与鸟歌颂。 ——宫崎骏《天空之城》 </p>
<p>也许,每天看见许多的水,对人类具有重大意义。 ——村上春树《当我谈跑步时我谈些什么》 </p>
<p>不要停在平原,不要登上高山,从半山上看,世界显得最美。 ——尼采《世界的智慧》 </p>
<p>有时候,你想证明给一万个人看,到后来,你发现只得到了一个明白的人,那就够了。 ——韩寒《后会无期》 </p>
<script type="text/javascript">
let oWrap = document.getElementById("wrap");
let oSpan = document.getElementsByTagName("span");
let font=18;
oSpan[0].onclick = function(){//点击事件
font++;
if(font>=21){
font = 21;
}
oWrap.style.fontSize = font + "px";
}
oSpan[1].onclick = function(){
font--;
if(font>=10){
font = 10;
}
oWrap.style.fontSize = font + "px";
}
</script>
</body>