2017.11.30 AngularJS弹框、FileReader读取文件、Js调后台方法、《小森林·夏秋》和《小森林·冬春》

第一组:刘聪 AngularJS弹框可拖动功能

框架内的弹框默认是不能拖动,在不改变框架的前提下,可以通过自定义指令实现该功能。在app.controller()后添加app.directive(),创建自定义指令。

1. 建立draggable指令:
image.png
2. 在html中添加该指令:
image.png

效果图如下:


image.png

功能是实现了但是本例还有问题,当想要修改文本框内容,鼠标想要拖动选择文本内容时十分困难,因为鼠标拖动会先使弹框移动,导致无法选中想要的内容,因此设置在文本框修改启用并且获得焦点时禁用拖动功能,当文本框失去焦点时则可以拖动。

实际上本例鼠标拖动会触发自定义指令中的element.on()事件,我们通过scope传入一个参数,当获得焦点时跳过element.on()里面的方法,失去焦点时则运行element.on()里面的方法。

文本框绑定获得、失去焦点事件:
Html:


image.png

Js:


image.png

自定义事件:


image.png

效果:


image.png

已经可以鼠标拖动复制了,但是最后还是要说一下:需要先点击一下文本框,获得焦点,才会禁用拖动功能,略蛋疼。。。


第二组:叶佳意 使用FileReader读取文件

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法:

1. 检测浏览器对FileReader的支持
1.  if(window.FileReader) {  
2.      var fr = new FileReader();  
3.      // add your code here  
4.  }  
5.  else {  
6.      alert("Not supported by your browser!");  
7.  }  
2. 调用FileReader对象的方法

FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result属性中。

方法名 参数 描述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本

readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。

readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。

readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

3. 处理事件

FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件。

事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

文件一旦开始读取,无论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。

1.  fr.onload = function() {  
2.      this.result;  
3.  };  
下面通过一个上传图片预览和带进度条上传来展示FileReader的使用。
1.  <script type="text/javascript">  
2.          function showPreview(source) {  
3.              var file = source.files[0];  
4.              if(window.FileReader) {  
5.                  var fr = new FileReader();  
6.                  fr.onloadend = function(e) {  
7.                      document.getElementById("portrait").src = e.target.result;  
8.                  };  
9.                  fr.readAsDataURL(file);  
10.             }  
11.         }  
12.     </script>  
13.   
14. <input type="file" name="file" onchange="showPreview(this)" />  
15.                                 <img id="portrait" src="" width="70" height="75">  

第三组:黄华英 Js调后台方法和Js数据类型转换

1. Js调后台方法

方法一

  • 首先建立一个按钮,在后台将调用或处理的内容写入button_click中;
  • 在前台写一个js函数,内容为document.getElementById("btn1").click();
  • 在前台或后台调用js函数,触发click事件,相当于访问后台c#函数;

方法二

  • 后台待调用函数声明为public (或者protected)
    public string button_click () //不能为void,否则执行会报错
    { return ""; }
  • 在前台直接用<%= button_click ()%>可以调用
    var a = “<%= button_click ()%>”;
2. Js数据类型转换
  1. 要将这一条数据的某状态与枚举进行比较,判断是否满足条件(比如大于7)

  2. 获取数据状态值:var status="<%=(int)PpcBase.PpcBase_Status %>"
    判断状态是否满足条件:if(status >= 7)
    判断结果始终是false,status的值为“8”,“9”(不是数字)

  3. 因此将status强制转换:if (parseInt(status) >= 7) 执行成功
    parseInt()提取字符串中的整数,例如parseInt("123zhang")的结果为123

顺带看一下其他类型转换:
转换成数字 xxx*1.0
parseFloat()提取字符串中的浮点数,例如parseFloat("0.55zhang")的结果为0.55
eval()执行用字符串表示的一段javascript代码,例如zhang=eval("1+1")的结果zhang=2

基本数据类型转换的三种方法:
转换为字符型:String() ; 例:String(678)的结果为"678"
转换为数值型:Number() ; 例:Number("678")的结果为678
转换为布尔型:Boolean() ; 例:Boolean("aaa")的结果为true


第四组:王芳 《小森林·夏秋》和《小森林·冬春》

这是我很喜欢的两部电影,女主市子一个人住在乡村,过着自给自足的生活,自己种菜做饭什么的。我不是很喜欢文艺类的东西,但是这个还不错,给人一种宁静、安定的感觉,意境和👇这首诗比较相似,它说得比我好。。

一只船孤独地航行在海上,
它既不寻求幸福,
也不逃避幸福,
它只是向前航行,
底下是沉静碧蓝的大海,
而头顶是金色的太阳。

资源:http://pan.baidu.com/s/1eRKGI7w

image.png

第五组:姜葳

缓一天,直接上链接,自取

老友记1-9季(几刷不解释):
https://pan.baidu.com/s/1kV1ktW7
insanity(疯狂健身):
https://pan.baidu.com/s/1qXPMtWS
肖申克的救赎(经典):
https://pan.baidu.com/s/1pLaDDZd
逍遥法外(帅帅的小李子):
https://pan.baidu.com/s/1slJpe6T
泰坦尼克号(帅帅的小李子):
https://pan.baidu.com/s/1nvKdhtn
东野圭吾:
https://pan.baidu.com/s/1c2q9nlm
电子书,kindle:
https://pan.baidu.com/s/1pKTmpOB

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,350评论 0 17
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,560评论 18 399
  • 在这个世界上,有人忙着赚钱,有人忙着养家。 当我嘴里塞着牛肉粒,手机拎着鸡腿,顶着一头乱蓬蓬的头发...
    少年理想国阅读 439评论 0 0
  • 一个人静静的 走进江南 在烟霓的傍晚 当月亮 刚刚把太阳赶进山 在西塘的镇口 我羞涩的迷醉 然后 不能自已 邂逅,...
    冷鍾暖言阅读 227评论 0 1
  • 今天是特种兵训练最后一天,在今天晚上我们第二期特种兵的家人们创造了一个奇迹,64个人签到时间仅仅只用了74秒,我们...
    FAB伊颜阅读 289评论 0 0