网页铃声系统样式实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46999664/article/details/108939389

这篇博客通过CSS和HTML展示了如何创建一个具有响应式样式的铃声系统。内容包括按钮的样式设置，如背景颜色、边距和悬停效果；输入框的样式；以及一个具有特定宽度、边框和背景图片的中央容器。容器内部包含文字和浮动元素，实现了基本的布局设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

body{
color: #fff;
}

button{
margin: 10px 0;
height: 30px;
width: 80px;
background: lightblue;
float: left;
}

input{
margin-top: 10px;
}

button:hover{
background-color: red;
}

#go{
width: 100%;
}

#del1{
margin-left: 60px;
}

.mid{
margin: 0 auto;
width: 400px;
height: auto;
border: 1px solid red;
padding: 20px;
background: url("…/img/1.gif") no-repeat;
background-size: 100% ;
opacity: 0.7;
overflow: hidden;
}

.data{
width: 55%;
text-align: center;
float: left;
margin-top: 40px;
}

#time3{
text-align: center;
font-size: 40px;
font-weight: bold;
}

.button{

}

.txt{
width: 100px;
height: auto;
float: right;
margin-top: 40px;
border: 1px solid red;
}

	</style>
	<title>铃声系统</title>
</head>
<body onload="">
	
		
	<div class="mid" id="mid">
		<div id="time3">
				2020年9月8日19：00：00
		</div>
		<div class="mid2" id="mid2">
		<div class="data">
			小时：<input id="in1" type="text" /><br>
			分钟：<input id="in2" type="text" /><br>
			秒钟：<input id="in3" type="text" /><br>
			<button id="go" onclick="time1()">点击开始</button>
			<div class="button">
				<button id="add1" onclick="add()">添加</button>
				<button id="del1" onclick="del()">删除</button>
			</div>
			<div id="miusic">
				<audio id="miu" controls style="display: none;">
				  <source src="audio/tt.mp3" type="audio/mpeg">
				  您的浏览器不支持 audio 元素。
				</audio>
			</div>
		</div>
		<div class="txt" id="txt">  
			<!-- <p>00 : 00 : 00</p> -->
		</div>
	</div>
	<script>

var number = 0;
var maximum = document.getElementById('txt'); 
var t;
var hh = new Array;
var mm = new Array;
var ss = new Array;
function add(){
	var h2 = document.getElementById("in1").value;
	var m2 = document.getElementById("in2").value;
	var s2 = document.getElementById("in3").value;
	var newly = document.createElement('p');
	hh.push(h2);
	mm.push(m2);
	ss.push(s2);
	console.log(hh);
	console.log(mm);
	console.log(ss);
	newly.innerHTML = h2 +"："+ m2 +"："+ s2;
	maximum.appendChild(newly);
	number++;
	return h2;
	return m2;
	return s2;
}
function del() {
	var last = maximum.lastElementChild;
	maximum.removeChild(last); 
}

function time1(){
	var newTime = new Date();
	var year = newTime.getFullYear();
	var month = newTime.getMonth()+1;
	var day = newTime.getDate();
	var hour = newTime.getHours();
	var miu = newTime.getMinutes();
	var sec = newTime.getSeconds();
	if(month<10){
		month = "0" + month;
	}
	if(day<10){
		day = "0" + day;
	}
	if(hour<10){
		hour = "0" + hour;
	}
	if(miu<10){
		miu = "0" + miu;
	}
	if(sec<10){
		sec = "0" + sec;
	}
	var time2 = document.getElementById("time3").innerHTML = year + "年" + month + "月" + day + "日" + hour + ":" + miu + ":" + sec ;

	// var h2 = document.getElementById("in1").value;
	// var m2 = document.getElementById("in2").value;
	// var s2 = document.getElementById("in3").value;
	for(var i=0;i<number;i++){
		if(hour == hh[i] && miu == mm[i] && sec == ss[i]){

			var star = document.getElementById('miu');
			star.currenTime = 10;
			star.play();

			function stop(){
				var star = document.getElementById('miu');
				star.pause();
			}

			t = setTimeout(stop, 10000);
			function ting(){
				clearTimeout(t);
			}
			setTimeout(ting, 10000);
		}
	}
}

setInterval(time1,1000);