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 ...
随机推荐
- use . adb . get wifi
adb shell 连接手机获取root权限,如果返回的字符串中不包含root字样,再输入su命令回车 继续输入cat /data/misc/wifi/*.conf命令,将会把文件打印出来 ssid表 ...
- python记录_day18 反射 判断函数与方法
一.三个内置函数 1.issubclass(a, b) 判断a类是否是b类的子类 class Foo: pass class Zi(Foo): pass class Sun(Zi): pass pr ...
- 【其他】【navicat】【1】navicat导入txt文件中文乱码问题解决
正文: TXT文件默认编码为ANSI,另存为编码为UTF-8的文本文件即可 备注: 1,一般需要导入的数据都是一张excel表,需要将excel表另存为“文本文件(制表符分隔)(*.txt)”保存类型 ...
- Ant Design 日期选择组件RangePicker 选择时间范围后计算范围内的天数。
/** *需求:同年同月,同年不同月(两个月相减大于1,小于1),不同年(两个年相减大于1(是否为闰年),小于1),起止包含的月份及天 */ //首先引入组件 import { DatePicker} ...
- poj-2115-exgcd
C Looooops Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 32062 Accepted: 9337 Descr ...
- LINQ 中常用函数使用： Take TakeWhile Skip SkipWhile Reverse Distinct
1,Take 方法 Take方法用于从一个序列的开头返回指定数量的元素. string[] names = { "郭靖", "李莫愁", "欧阳晓晓& ...
- 在MongoDB中执行查询、创建索引
1. MongoDB中数据查询的方法 (1)find函数的使用: (2)条件操作符: (3)distinct找出给定键所有不同的值: (4)group分组: (5)游标: (6)存储过程. 文档查找 ...
- hdu多校1004 Distinct Values
Distinct Values Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): ...
- JQuary中的FullPage属性的用法
$(document).ready(function(){ //常用方法 //$.fn.fullpage.moveSectionUp() //向上滚动一页 //$.fn.fullpage.m ...
- linux上udev的配置（转载）
udev配置文件主要的udev配置文件是/etc/udev/udev.conf.这个文件通常很短,他可能只是包含几行#开头的注释,然后有几行选项:udev_rules=”/etc/udev/rules ...