day 53 练习
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>
day 53 练习的更多相关文章
- 53. 特殊的O(n)时间排序[sort ages with hashtable]
[本文链接] http://www.cnblogs.com/hellogiser/p/sort-ages-with-hashtable.html [题目] 某公司有几万名员工,请完成一个时间复杂度为O ...
- APK瘦身记，如何实现高达53%的压缩效果
作者:非戈@阿里移动安全 1.我是怎么思考这件事情的 APK是Android系统安装包的文件格式,关于这个话题其实是一个老生常谈的题目,不论是公司内部,还是外部网络,前人前辈已经总结出很多方法和规律. ...
- 【leetcode】Maximum Subarray (53)
1. Maximum Subarray (#53) Find the contiguous subarray within an array (containing at least one nu ...
- 【原创】loadrunner12.53 录制脚本时 打不开网页或者打开网页慢？
问题描述: 之前刚装12.5版本时候,用 WebTours测试过,应用程序选择自己本地IE浏览器.exe程序,输入url地址就可以成功录制了 . 但是由于公司网络配置环境改变了(猜测),现 ...
- 【原创】安装LoadRunner12.53 版本时出现Critical error的解决方法
步骤: 1.在官网上下载LoadRunner12.53正版,只不过要注册,然后官网会给个序列号. 2.安装成功之后,快捷键已创建,打开Virtual User Generator时,提示如下错误: 此 ...
- [译] OpenStack Liberty 版本中的53个新变化
一个新的秋季,一个新的OpenStack 版本.OpenStack 的第12个版本,Liberty,在10月15日如期交付,而且目前发行版本已经备好了.那么我们期望能从过去六个月时间的开发中获得些什么 ...
- AWS国际版的Route 53和CloudFront
注册AWS国际版账号后,却发现Route 53和CloudFront功能是无法使用的.于是提交了一个Service Request,得到的答复是这两个功能需要验证后才能激活. 在控制台中点击进入Rou ...
- Joomla![1.5-3.4.5]反序列化远程代码执行EXP（直接写shell）
Usage:x.py http://xxx.com # coding=utf-8# author:KuuKi# Help: joomla 1.5-3.4.5 unserialize remote co ...
- Scala 深入浅出实战经典 第53讲：Scala中结构类型实战详解
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- 重新想象 Windows 8 Store Apps (53) - 绑定: 与 ObservableCollection CollectionViewSource VirtualizedFilesVector VirtualizedItemsVector 绑定
[源码下载] 重新想象 Windows 8 Store Apps (53) - 绑定: 与 ObservableCollection CollectionViewSource VirtualizedF ...
随机推荐
- javascript 两张图片切换 三目运算符
<body> <script> function changeImage(){ var s = document.getElementById('myimage'); s.sr ...
- redis,memcache二者的区别是？（优缺点）
Memcache和Redis区别: Redis中,并不是所有的数据都一直存储在内存中的,这是和Memcache相比一个最大的区别. Redis在很多方面具备数据库的特征,或者说就是一个数据库系统,而M ...
- CentOS7 下源代码安装apache2.4
Apache httpd 2.4 源代码安装 https://httpd.apache.org/docs/2.4/install.html 这里选用Apache2.4版本. wget http ...
- z-index注意事项
1. z-index只对定位元素有效(如position:absolute!) 2. 被覆盖的元素将无法触发其鼠标相关事件.(个人经验,可能有例外.) 3. 无法通过z-index使父级覆盖子级,如果 ...
- jquery快速获得url 的get传值
<script> var res = location.search.substr(1).split("&"); var arr={}; for (var i ...
- POJ No.2386 Lake Counting
题目链接:http://poj.org/problem?id=2386 分析:八联通的则为水洼,我们则需遍历一个单位附近的八个单位并将它们都改成'.',但附近单位可能仍连接着有'W'的区域,这种情况下 ...
- oracle 如何创建只有查询权限的用户
.create user userName identified by password; .grant select any table to userName; --授予查询任何表 .grant ...
- Notes for 'Making elephants fly'
1. 技术陷阱:应是需求导向, 而不是技术导向. 2. 时机最重要:而不是创造力,团队,客户,产品,或技术. 3. 模仿:能模仿就模仿,不能模仿就创新.巧匠摹形,大师窃意. good artists ...
- 解决VS Code保存时候自动格式化
VS code 保存会自动格式化.以前都是alt+shift+F格式化的,现在一保存就格式化 解决方式:找到你的VScode扩展,把JS-CS-HTML Formatter这个插件禁用就可以解决
- Linux svn的搭建和使用
搭建: http://www.cnblogs.com/aLittleBitCool/archive/2011/07/09/2101602.html 使用: http://www.cnblogs.com ...