java vs c javavscript怎么做按钮

转载

云端小梦 2023-08-09 05:51:45

文章标签 java vs c js javascript CSS HTML 文章分类 Java 后端开发

制作一个网页计时器需要以下的HTMl标签

<div></div>
<button></button>
<span></span>

网页计时器并不难制作，只是其过程较为复杂。首先用HTML标签进行布局。

我们可以用六个span标签来布局也可以直接在span标签中写所有样式，直接在span标签中写所有样式会使HTML页面更加简介，代码运行更加流畅，缺点是会显得比较突兀。一个span标签写一个样式则代码运行速度较慢，代码量较多，好处是可以任意修改其中某一个的样式。

我们用第二种写法，用一个div标签包裹一个span标签，在span标签中填写我们所需的样式。在用另一个div标签包裹button标签，button标签是一个按钮，使用button标签而不使用div标签是因为button标签本身就是一个按钮，不用改变元素，而使用div标签则需要在CSS中去设置他的样式。,基本布局已经完成现在就是修改样式。

（下图为作者所说的两种布局）

<div>
	<span>0000</span>年
	<span>00</span>月
	<span>00</span>日
	<span00</span>:
	<span>00</span>:
	<span>00</span>
	</div>
	<div>
	<button>开始</button>
	<button>暂停</button>
	</div>



<div>
		<span>2021年03月28日 08时00分00秒</span>
	</div>
	<div>
		<button>开始</button>
		<button>暂停</button>
	</div>

修改样式需要用到CSS，我们可以使用link标签插入CSS，也可以使用style标签在HTML中修改样式。使用CSS添加样式前我们给需要添加样式的标签一个“类”或者一个“名称”，类和名称并不是随便取的类和名称只能是数字，字母下划线。

我们分别给两个div两个不同的类，也给span标签和button标签一个ID。

引入CSS文档

引入CSS文档需要用link标签也可以用style标签。link标签是将CSS文档引入HTML文档，而style标签则是直接在HTMl文档中修改CSS样式。

我们将已经布局好的CSS样式引入HTML文档中，所以我们使用link标签。在link标签中的href输入CSS的保存地址即可引入CSS文件到HTML中。

CSS样式的设置

＊是通配符表示选中全部 margin是外边距　　padding是内边距　　background是背景（背景是符合属性）　text－size是字体大小　　text－align使文本靠那边

font-weight是字体加粗 display是元素的状态 color是字体颜色 border是边框样式

*{
	margin: 0;
	padding: 0;
}
body{
	background: #ef4036;
    color: #fff;
}
.container{
	margin: 100px auto;
	text-align: center;
	font-size: 4rem;
    font-weight: 300;
}
.container span{
	display: inline-block;
}
.btngroup{
	text-align: center;
}
.btngroup button{
	margin: 0px 10px;
	padding: 30px 100px;
	border:none;
    border-radius: 5px;
	font-size: 2rem;
	color:#fff;
}
.btngroup button:first-child{
	background: #000;
}
.btngroup button:last-child{
	background: #ffb200;
}

设置完CSS样式下一步就是设置JavaScript了，设置JavaScript和设置CSS一样要引入文档，不同于CSS的是JavaScript文档的引入是使用script标签进行引入，script标签也可以在HTML中设置样式。（注意：script标签引入后就不能在HTML设置样式，如果还要设置样式就得在添加一个script标签）

JavaScript对标签事件的添加

首先使用给一个页面加载完成事件,表示当页面加载完成后在执行其中的代码。（也可以不用添加该事件，因为代码是从上往下执行，添加此事件是为了避免一些事件无法获取的原因）

window.onload=function(){}

第二步，声明两个变量并将两个按钮赋值给这两个变量，声明完变量就开始绑定点击事件，给“开始”的按钮绑定一个点击事件和一个延时定时器，给“暂停0”的按钮绑定一个暂停定时器的事件。如下所示（为了避免开启多个定时器，这里我们给“开始”按钮一个if语句，当返回值为true时执行点击事件，当返回值为false时不执行点击事件。这样避免了同时打开多个定时器并无法暂停的BUG）。

var timer=null;
var bl=false;
window.onload=function(){
	var btnstart=document.getElementById("start");
	var btnstop=document.getElementById("stop");
	
	btnstart.onclick=function(){
		if(bl){
			return false;
		}
		timer=setInterval(function(){
			showTime();
		},1000);
		bl=true;
	};
	btnstop.onclick=function(){
		clearInterval(timer);
		bl=false;
	}
}

第三步，定时器一个匿名函数并声明一个日期对象，给每个元素赋值（因为月份是从0开始所以在月份后面需要在加个一）.

function showTime(){
	var date=new Date();
	var year=date.getFullYear();
	var mouth=date.getMonth()+1;
	var day=date.getDate();
	var hours=date.getHours();
	var minute=date.getMinutes();
	var second=date.getSeconds();