随机点餐
<style>
.outer{
margin: auto;
width: 500px;
height: 300px;
background-color: rgb(230, 183, 191);
text-align: center;
overflow: hidden;
}
#foods{
margin: 50px auto 30px;
display:block;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: rgb(192, 245, 227);
text-align: center;
line-height: 150px;
}
button{
width: 80px;
height: 40px;
background-color: lightgray;
border: none;
}
button:active{
color: red;
font-size: 20px;
}
</style>
<body>
<div class="outer">
<span id="foods">火锅</span>
<div class="inner">
<button id="begin">开始</button>
<button id="end">停止</button>
</div>
</div>
<script>
let begin = document.getElementById('begin')
let end = document.getElementById('end')
let food = document.getElementById('foods')
var arr = ['火锅','新疆炒米粉','香蕉牛奶','珍珠奶茶','泡芙','华夫饼','炒米粉','燕麦牛奶','桂花酿','桂花引','百香果','草莓摇摇奶昔','菜夹馍','擀面皮','米皮','凉皮','串串','卤菜','刀削面','麻辣烫','过桥米线','黄焖鸡','快餐','炒拉条','冒菜','冰淇淋']
var timer = null
begin.addEventListener('click',function() {
window.clearInterval(timer)
timer = window.setInterval(getFoods,100)
})
function getFoods() {
var random = Math.trunc(Math.random()*arr.length)
food.innerHTML = arr[random]
}
end.addEventListener('click',function(){
clearInterval(timer)
})
</script>
</body>
钟表
方法一:
<style>
#time {
width: 400px;
height: 200px;
border: 3px double #ccc;
margin: 50px auto;
font-size: 50px;
text-align: center;
line-height: 200px;
}
.btn {
display: block;
width: 200px;
height: 50px;
text-align: center;
margin: auto;
border-radius: 5px;
font-size: 30px;
background-color: rgb(223, 221, 221);
}
</style>
<body>
<div id="time"></div>
<button class="btn">开始</button>
<script>
// 1.定义计时器
var timer = null
var flag = true//控制按钮
// 2.定义函数--显示时间
function getTimes() {
let current = new Date()
let hours = current.getHours()
hours = hours < 10 ? '0'+ hours : hours
let minutes = current.getMinutes()
minutes = minutes < 10 ? '0'+ minutes : minutes
let seconds = current.getSeconds()
seconds = seconds < 10 ? '0'+ seconds : seconds
let str = `${hours}:${minutes}:${seconds}`
document.getElementById('time').innerHTML = str
}
getTimes()//调用函数
// 3.给按钮注册时间监听
let start = document.querySelector('.btn')
start.addEventListener('click',function() {
if (flag) {
timer = setInterval(getTimes,1000)
flag = !flag
this.innerHTML='暂停'
}else{
clearInterval(timer)
flag = !flag
this.innerHTML='开始'
}
})
</script>
</body>
方法二:
<style>
.time{
width: 400px;
height: 200px;
border: 3px double #ccc;
margin: 50px auto;
font-size: 50px;
text-align: center;
line-height: 200px;
}
.btn{
display: block;
width: 200px;
height: 50px;
text-align: center;
margin: auto;
border-radius: 5px;
font-size: 30px;
background-color: rgb(223, 221, 221);
}
</style>
<body>
<!-- 开始和结束是同一个 -->
<div class="time"></div>
<button class="btn" onclick="choose()">暂停/开始</button>
<script>
// 1、编写程序,实现电子时钟自动走动的效果,并提供一个按钮控制电子时钟是否停止走动。
// 定义计时器
var timer = null
// 获取时间
function getTime() {
let current = new Date()
let hours = current.getHours()
hours = hours < 10 ? '0' + hours : hours
let minutes = current.getMinutes()
minutes = minutes < 10 ? '0' + minutes : minutes
let seconds = current.getSeconds()
seconds = seconds < 10 ? '0' + seconds : seconds
let str = `${hours}:${minutes}:${seconds}`
document.querySelector('.time').innerHTML=str
// 计时器每隔1秒执行一次
timer = setTimeout(getTime,1000)
}
// 调用函数
getTime()
// 控制按钮
let action = true
function choose() {
if (action == true) { //暂停
action = !action
document.getElementsByClassName('btn')
// 清除计时器
clearInterval(timer)
}else{ //开始
action = !action
document.getElementsByClassName('btn')
getTime()
}
}
</script>
</body>
复选框的选择
方法一:
<body>
<!-- 2、复选框的全选: -->
<form action="#">
<p>请选择你的爱好:</p>
<p><input type="checkbox" name="" id="allselect">全选/全不选</p>
<p>
<input type="checkbox" class="play">打篮球
<input type="checkbox" class="play">踢足球
<input type="checkbox" class="play">上网
<input type="checkbox" class="play">写代码
<input type="checkbox" class="play">写文档
<input type="checkbox" class="play">查BUG
</p>
<p>
<button id="selectall">全选</button>
<button id="notselectall">全不选</button>
<button id="reverselect">反选</button>
</p>
</form>
<script>
let playing = document.querySelectorAll('.play')
// 全选/全不选
let all = document.getElementById('allselect')
let flag = true
function getAll() {
if (flag) {
for (let i = 0; i< playing.length;i++) {
playing[i].checked = true
}
flag =false
} else{
for (let i = 0; i < playing.length; i++) {
playing[i].checked = false
}
flag=true
}
}
// 添加事件监听
all.addEventListener('click',getAll)
// 全选
let selectAll = document.getElementById('selectall')
function getSelectAll() {
for (let i = 0; i < playing.length; i++) {
playing[i].checked = true
}
}
// 添加事件监听
selectAll.addEventListener('click', getSelectAll)
// 全不选
let notSelectAll = document.getElementById('notselectall')
function getNotSelectAll() {
for (let i = 0; i < playing.length; i++) {
playing[i].checked = false
}
}
// 添加事件监听
notSelectAll.addEventListener('click', getNotSelectAll)
// 反选
let reverSelect = document.getElementById('reverselect')
function getReverseSelect(){
for (let i = 0; i < playing.length; i++) {
if (playing[i].checked==false) {
playing[i].checked=true
}else{
playing[i].checked=false
}
}
}
// 添加事件监听
reverSelect.addEventListener('click', getReverseSelect)
</script>
</body>
方法二:
<body>
<!-- 2、复选框的全选: -->
<form action="#">
<p>请选择你的爱好:</p>
<p><input type="checkbox" name="" id="allornot">全选/全不选</p>
<p>
<label><input type="checkbox" name="hobby"/>打篮球</label>
<label><input type="checkbox" name="hobby"/>踢足球</label>
<label><input type="checkbox" name="hobby"/>上网</label>
<label><input type="checkbox" name="hobby"/>写代码</label>
<label><input type="checkbox" name="hobby"/>写文档</label>
<label><input type="checkbox" name="hobby"/>查BUG</label>
</p>
<p>
<button id="selectall">全选</button>
<button id="notselectall">全不选</button>
<button id="reverselect">反选</button>
</p>
</form>
<script>
let allornot = document.getElementById('allornot')
let selectall = document.getElementById('selectall')
let notselectall = document.getElementById('notselectall')
let reverselect = document.getElementById('reverselect')
// 全选
function selectAll() {
let interest = document.getElementsByName('hobby')
for (let i = 0; i < interest.length; i++) {
interest[i].checked = true
}
}
selectall.addEventListener('click',selectAll)
// 全不选
function notSelectAll() {
let interest = document.getElementsByName('hobby')
for (let i = 0; i < interest.length; i++) {
interest[i].checked = false
}
}
notselectall.addEventListener('click',notSelectAll)
// 反选
reverselect.addEventListener('click',function(){
let interest = document.getElementsByName('hobby')
for (let i = 0; i < interest.length; i++) {
interest[i].checked = !interest[i].checked
}
})
// 全选/全不选
// 复选框:推荐使用change
allornot.addEventListener('change',function(){
let interest = document.getElementsByName('hobby')
if (this.checked) {
selectAll()
}else{
notSelectAll()
}
})
</script>
</body>