计时器:
<body>
<input type="text" id="i1">
<input type="button" value="开始" id="start" onclick="start()">
<input type="button" value="结束" id="end" onclick="end()">
<script>
var intervalId;
function f() {
var timeStr = (new Date()).toLocaleString();
var inputEle = document.getElementById('i1');
inputEle.value = timeStr;
} function start() {
f();
if(intervalId === undefined){
intervalId = setInterval(f,1000)
} function end() {
clearInterval(intervalId);
interval = undefined;
}
}
</script>
</body>
搜索框:
这个搜索框默认会在里面提示搜索内容,当鼠标点击时,内容会变空. 鼠标焦点离开时,又会恢复提示,如果输入框内有输入内容,则不会恢复提示
<input type="text" id="username" value="请输入内容" > <script>
var inpEle = document.getElementById('username');
inpEle.onfocus = function () {
if(this.value === '请输入内容'){
this.value='';
}else{ }
};
inpEle.onblur = function () {
if(this.value.trim().length === 0){
this.value = '请输入内容';
} //这里也可以有另一种方式,(判断内容的长度,为0就是空)
// if (this.value.trim().length === 0){
// this.value='请输入内容';
// } };
</script>
selected联动:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>select联动</title>
</head>
<body>
<select id="province">
<option>请选择省:</option>
</select> <select id="city">
<option>请选择市:</option>
</select> <script>
data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}; var p = document.getElementById("province");
var c = document.getElementById("city");
//页面一刷新就将所有的省份都添加到select标签中
for (var i in data) {
var optionP = document.createElement("option"); //创建option标签
optionP.innerHTML = i; //将省份的数据添加到option标签中
p.appendChild(optionP);//将option标签添加到select标签中
}
//只要select中选择的值发生变化的时候，就可以触发一个onchange事件，那么我们就可以通过这个事件来完成select标签联动
p.onchange = function () {
//1.获取省的值
var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndex是当前选择的option标签的索引位置，
//this.options是获取所有的option标签，通过索引拿到当前选择的option标签对象，然后.innerHTML获取对象中的内容，也就是省份
//还可以这样获取省：var pro = this.value;
var citys = data[pro]; //2. 通过上面获得的省份去data里面取出该省对应的所有的市
// 3. 清空option
c.innerHTML = ""; //清空显示市的那个select标签里面的内容
//4.循环所有的市，然后添加到显示市的那个select标签中
for (var i=0;i<citys.length;i++) {
var option_city = document.createElement("option");
option_city.innerHTML = citys[i];
c.appendChild(option_city);
}
}
</script>
</body>
</html>