1 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>王岩的跑马灯</title>
</head>
<body>
<sapan id="i1">我的家在河北保定</sapan>
</body>
<script>
function run() {
var ele = document.getElementById('i1');
var ele_text=ele.innerText;
var first_str=ele_text.charAt(0);
var backstr=ele_text.slice(1);
//此时获得是除了第一个元素之外的全部元素的的家在河北保定
var new_text=backstr + first_str;
// 一定要把第一个元素放在后边才行 才能起到循环的作用
ele.innerText=new_text;
}
// run();
var timer =setInterval(run,1000);
//这里的run不用加括号类似匿名函数
// clearInterval(timer);
//停止循环
</script>
</html>
------------------
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="s1" onchange="loadData()">
<option value="">请选择省份</option>
</select>
<select name="" id="s2">
<option value="">请先选择省份</option>
</select>
</body>
<script>
//第一步把省份的option标签及文本内容添加到s1
//得到的结果是<option>河北<option><option>湖南<option><option>四川<option>
var s1Ele=document.getElementById('s1');
var data = {"河北": ["石家庄", "保定", "邯郸"], "湖南": ["长沙", "岳阳", "张家界"],
"四川": ["成都", "绵阳", "攀枝花"]};
var str='';
for(var key in data){
// console.log(key);
var s ='<option>' + key + '<option>';
// console.log(s)
str += s;
s1Ele.innerHTML=str;
}
console.log(str);
function loadData() {
var s2Ele=document.getElementById('s2');
s2Ele.options.length=0;
//清空数组 为何变成空 因为opttions 城市数量太多了 最后一步在添加
// 否则就叠加了 耦合了原本是[0,1,2]
//取出索引值省份的索引值
var indexvalue =s1Ele.selectedIndex;
//重要 根据索引取值 如果s2Ele.selectedIndex; 只能是[0,1,2]1是河北 2 是湖南
// options 是个数组[option，option，option]
// s1Ele.options[0].text 就是河北
// s1Ele.options[0].htmal <option>河北<option>
// 取出省份的数组
var optionsEle=s1Ele.options;
// 省份的内的文档就是保定 攀枝花
var key =optionsEle[indexvalue].innerText;
// console.log(key)
var data2=data[key];
//循环出来的就是城市名称
for(var i=0;i<data2.length;i++){
//创建了一个元素标签
var optionEle=document.createElement('option');
//城市的名称属于文本内容 和索引确定一个城市
optionEle.innerText=data2[i];
//s2
s2Ele.appendChild(optionEle);
}
}
</script>
</html>
<!--onchange 域的内容被改变 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）-->
<!--selectedIndex;-->
<!--options.length=0;-->
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 80%;
height: 100px;
background-color: aqua;
margin:0 auto;
/*居中对齐*/
}
</style>
</head>
<body>
//双击
<div class="c1" ondblclick="showalert()"></div>
<div>
//注意 注意注意 placeholder 占位符,占位,占位文本 和zhis 必须写不能别的参数代替
<input type="text" placeholder="我是失去聚焦实现的-小王" onfocus="f1(this);" onblur="blur1(this);">
</div>
</body>
<script>
//双击点击背景后显示
function showalert() {
// console.log(alert('双击后显示'))
alert('双击后显示');
}
//聚焦后不显示 点击后不显示
function f1(a){
a.setAttribute('name','');
}
//失去焦点后显示内容
function blur1(q) {
q.setAttribute('name','我是失去聚焦实现的-小王');
}
</script>
</html>
<!--onfocus 元素获得焦点。 // 练习：输入框-->
<!--onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.-->
<!--onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）-->
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*全覆盖*/
.cover{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: lightgray;
}
/*隐藏*/
.hide{
display: none;
}
/*模态框*/
.modal{
position: fixed;
top:50%;
left:50%;
width: 600px;
height: 400px;
background-color: red;
margin-left: -300px;
margin-top: -200px;
}
</style>
</head>
<body>
<input type="button" value="显示模态框" onclick="showmodal()">
<div class="cover hide"></div>
<div class="modal hide">
<input type="text" name="技师姓名"> <input type="text" name="出生年月">
<input type="button"value="提交"> <input type="button" onclick='cancer()' value="取消">
</div>
</body>
<script>
//显示
function showmodal() {
//显示全局
var coverEle=document.getElementsByClassName('cover')[0];
coverEle.classList.remove('hide');
//显示模态
var modalEle=document.getElementsByClassName('modal')[0];
modalEle.classList.remove('hide');
}
//取消
function cancer() {
//取消模态
var modalEle=document.getElementsByClassName('modal')[0];
modalEle.classList.add('hide');
//取消全局
var coverEle=document.getElementsByClassName('cover')[0];
coverEle.classList.add('hide');
}
</script>
</html>
5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>反选 全选 取消</title>
<style>
.tab{
text-align: center;
}
</style>
</head>
<body>
<table class="tab" border="1">
<thead>
<tr>
<th>#</th>
<th width="150px">技师姓名</th>
<th width="150px">技师年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class='c1' type="checkbox"></td>
<td>德胜</td>
<td>22</td>
</tr>
<tr>
<td><input class='c1' type="checkbox"></td>
<td>建超</td>
<td>25</td>
</tr>
<tr>
<td><input class='c1' type="checkbox"></td>
<td>大伟</td>
<td>33</td>
</tr>
</tbody>
</table>
<div><input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="rervrse()">
<input type="button" value="取消" onclick="canceAll()"></div>
</body>
<script>
//全选
function checkAll() {
var checkAllEles=document.getElementsByClassName('c1');
for(var i =0;i<checkAllEles.length;i++){
checkAllEles[i].checked=true
}
}
// //反选
function rervrse() {
var checkAllEles=document.getElementsByClassName('c1');
for(var i =0;i<checkAllEles.length;i++){
checkAllEles[i].checked = !checkAllEles[i].checked
}
}
function canceAll(){
var checkAllEles=document.getElementsByClassName('c1');
for(var i =0;i<checkAllEles.length;i++){
checkAllEles[i].checked = false
}
}
</script>
</html>
6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定示例要求鼠标点到数字的位置就显示相应的数字</title>
</head>
<body>
<!--//注意100个li的生成是 li{$}*100 形成一百个列表-->
<ul id="i1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li>71</li>
<li>72</li>
<li>73</li>
<li>74</li>
<li>75</li>
<li>76</li>
<li>77</li>
<li>78</li>
<li>79</li>
<li>80</li>
<li>81</li>
<li>82</li>
<li>83</li>
<li>84</li>
<li>85</li>
<li>86</li>
<li>87</li>
<li>88</li>
<li>89</li>
<li>90</li>
<li>91</li>
<li>92</li>
<li>93</li>
<li>94</li>
<li>95</li>
<li>96</li>
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
</ul>
<script>
// var i1Ele=document.getElementsByTagName('li');
// 注意是标签的长度
// for (var i=0;i<i1Ele.length;i++){
// i1Ele[i].onclick =function(){
// // alert(123);
// alert(this.innerText);
// // 此时想表示点击在某一个数字就是专用的this 显示文档的内容就是text
// }
// }
// 第二种方法 通过id找到父类 冒泡
var i1Ele=document.getElementById('i1');{
i1Ele.onclick=function (ev) {
// console.log(ev.target);
// target 是个目标值 此时的目标值
var targetEle=ev.target;
alert(targetEle.innerText)
}
}
</script>
</body>
</html>
