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 ...
随机推荐
- 一个不该写的bat
新建bat文件,放到D盘根目录 %0|%0 进入到C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\Program ...
- ActiveMQ的学习整理（代码实现PTP，以及Pub/Sub）
(一)由于在实习过程中需要用到ActiveMQ,在网上看了很多文章,现在整理出来以防忘记. (二)这篇文章比较适合之前没有接触过的同学,在看下面文章的过程中,建议先学习参考链接中的知识点,然后自己再参 ...
- python-项目流程分析及优化查询方法
项目流程分析: ****** 1. 需求分析 2. 知识点 - 插件 3. 功能分析: - 用户登录 - session - 签名cookie PS: 主动设置超时时间:request.session ...
- PyCharm + PyQt4 环境搭建
一.准备工作 下载pycharm 和 pyqt4 (百度下就有) pyqt4安装好后,在C:\Python27\Lib\site-packages\PyQt4 路径下会有designer.exe ,这 ...
- TCP如何保证可靠性
如何保证可靠性? 1.校验和.在TCP的首部中有一个占据16为的空间用来放置校验和的结果. 这是一个端到端的检验和,目的是检测数据在传输过程中的任何变化.如果收到段的检验和有差错,TCP将丢弃这个报文 ...
- 类似“未能加载文件或程序集“tesseractengine3”或它的某一个依赖项”等一些问题的解决方案
有些时候我们引用了一些32位的dll,结果就会出现类似“未能加载文件或程序集“tesseractengine3”或它的某一个依赖项”这样的问题,原因是IIS的应用程序池的设置中默认是不启用32位的应用 ...
- PostgreSQL主备流复制机制
原文出处 http://mysql.taobao.org/monthly/2015/10/04/ PostgreSQL在9.0之后引入了主备流复制机制,通过流复制,备库不断的从主库同步相应的数据,并在 ...
- NOIP2003加分二叉树
题目描述 设一个n个节点的二叉树tree的中序遍历为(1,2,3,…,n),其中数字1,2,3,…,n为节点编号.每个节点都有一个分数(均为正整数),记第ii个节点的分数为di,treedi,tree ...
- java高级---->Serializable的过程分析
本次讲解中我们在上次的基础上,深入的了解一下序列化的流程以及其中的原理.关于序列化的一些知识与使用,请参见我的另一篇博客:java基础---->Serializable的使用.好了,我们进行以下 ...
- img 标签
设计网页时经常使用的图片有三种,它们的相同点是都经过了压缩,压缩比越高,图像品质越差. GIF(Graphics Interchange Format):最多支持256色,支持透明,支持多帧动画显示效 ...