.NET入门相关学习

2023/05/17记录

html标签使用练习

1 <div style="background-color:lightgreen;text-align:center;width:200px;margin:10px;display: inline-block;vertical-align:top">
2         <p style="text-align:left;margin:10px">(居左)</p>
3         <p style="text-align:center;margin:10px">(居中)</p>
4         <p style="text-align:right;margin:10px">(居右)</p>
5         <p style="text-align:center">^-^</p>
6     </div>
段落布局标签

 

FileReader读取文件。（FileWrite还在研究，浏览器似乎不支持）

 1 @*组件3*@
 2     <div style="background-color:lightgreen;text-align:center;width:200px;margin:10px;display: inline-block;vertical-align:top">
 3         <div>
 4             本地txt读取
 5             <input type="file" id="file3" />
 6             <p id="result3" style="word-wrap:break-word;overflow:scroll;height:100px"></p>
 7             @*此处result放置读取结果*@
 8             <input type="button" value="打开txt" onclick="readText3()" style="width:180px"/>
 9             <script type="text/javascript">
10                 var reader = FileReader ? new FileReader : (alert("浏览器暂不支持FileReader"),null);
11                 var readText3 = function () {
12                     // 以文本文件方式读取文件
13                     if (/text\/\w+/.test(document.getElementById("file3").files[0].type)) {
14                         reader.readAsText(document.getElementById("file3").files[0], "utf8");
15                         //reader.readAsBinaryString(document.getElementById("file1").files[0]);//读取二进制文件
16                         //reader.readAsDataURL(document.getElementById("file1").files[0]);//以DataURL方式读取
17                         reader.onload = function () {
18                             document.getElementById("result3").innerHTML = reader.result;//result更新
19                         };
20                     } else {
21                         alert("你选择的不是文本文件！");
22                     }
23                 }
24             </script>
25         </div>
26     </div>
浏览读取txt文件
 1     @*组件4*@
 2     <div style="background-color:lightgreen;text-align:center;width:200px;margin:10px;display: inline-block;vertical-align:top">
 3         <div>
 4             本地img读取
 5             <input type="file" id="file4" />
 6             <p id="result4" style="width:100px"></p>
 7             @*此处result放置读取结果*@
 8             <input type="button" value="打开img" onclick="readText4()" style="width:180px" />
 9             <script type="text/javascript">
10                 var reader = FileReader ? new FileReader : (alert("浏览器暂不支持FileReader"), null);
11                 var readText4 = function () {
12                     reader.readAsDataURL(document.getElementById("file4").files[0]);
13                     reader.onload = function (e) {
14                         document.getElementById("result4").innerHTML = '<img src="' + this.result + '" alt=""/>'
15                     }
16                 }
17             </script>
18         </div>
19     </div>
浏览读取img文件

 

按钮配置及事件设置模板

 1 @*组件5*@
 2     <div style="background-color:lightgreen;text-align:center;width:200px;margin:10px;display: inline-block;vertical-align:top">
 3         <h style="text-align:center">按钮模板</h>
 4         <input type="button" value="点击按钮验证响应" style="width:180px" onclick="writeTXT1()">
 5         <p id="zhuangtai1"></p>
 6         <script type="text/javascript">
 7             var writeTXT1 = function () {
 8                 document.getElementById("zhuangtai1").innerHTML = "<font color='blue' size='3px'>已检测到按钮点击事件</font>";
 9             }
10         </script>
11     </div>
按钮编辑模板

 

 

部分包安装：

 点击管理解决方案的NuGet程序包，浏览-输入-搜索-安装。

 

posted @ 2023-05-17 15:31  yyn工作号  阅读(21)  评论(0)    收藏  举报