下拉左右互换，国庆节倒计时
2018-08-22 本文已影响0人
跟我念一遍
01下拉互换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn1">过去</button>
<select name="好迪真好" id="s1">
<option>你好</option>
<option>我好</option>
<option value="">大家好</option>
<option value="">好迪</option>
<option value="">真好</option>
</select>
<button id="btn2">过去</button>
<select name="老司机" id="s2">
<option value="">陈冠希</option>
<option value="">费玉清</option>
<option value="">岳云鹏</option>
<option value="">郭德纲</option>
<option value="">崔永元</option>
</select>
</body>
</html>
<script>
var obtn1 = document.getElementById('btn1')
var obtn2 = document.getElementById('btn2')
var slc1 = document.getElementById('s1')
var slc2 = document.getElementById('s2')
obtn1.onclick = function(){
//拿到选项中的索引
var index = slc1.selectedIndex
//拿到选项中的内容
content = slc1.options[index].innerHTML
// console.log(content)
//添加一个option并将内容赋给它
var oopt1 = document.createElement('option')
oopt1.innerHTML = content
slc2.appendChild(oopt1)
//拿到当前option并删除
var oopt2 = slc1.options[index]
slc1.removeChild(oopt2)
}
obtn2.onclick = function(){
//拿到选项中的索引
var index = slc2.selectedIndex
//拿到选项中的内容
content = slc2.options[index].innerHTML
//添加一个option并将内容赋给它
var oopt3 = document.createElement('option')
oopt3.innerHTML = content
slc1.appendChild(oopt3)
//拿到当前option并删除
var oopt4 = slc2.options[index]
slc2.removeChild(oopt4)
}
</script>
02国庆节倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
#d1{
width: 100%;
height: 300px;
line-height: 300px;
text-align: center;
background-color: red;
font-size: 50px;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
<script type="text/javascript">
var odiv = document.getElementById('d1')
var timer = setInterval(function(){
//结束时间
var endtime = new Date('2018/10/1 00:00:00')
// console.log(endtime)
var end = endtime.getTime()
// console.log(end)
//当前时间
var date = new Date()
var nowtime = date.getTime()
// console.log(nowtime)
remain_time = end - nowtime
if (remain_time > 0){
day = parseInt(remain_time/1000/60/60/24)
hour =parseInt(remain_time/1000/60/60%24)
minute =parseInt(remain_time/1000/60%60)
second =parseInt(remain_time/1000%60)
}
str = '距离国庆节还有'+'\n'+day+'天'+hour+'小时'+minute+'分钟'+second+'秒'
// console.log(str)
odiv.innerHTML = str
},1000)
</script>
国庆节倒计时.gif
