JS獲取TXT文件內容 與 YouTube頂部效果

目錄

JQuery的prop()和attr()屬性:

YouTube頂部效果

Windows服務器任務計劃:

vue-wechat-title

頁面拖拽移動

JS獲取TXT文件內容


JQuery的prop()和attr()屬性:

使用JQuery操作單選框時attr()設置checked屬性在第二次就不起作用,

使用控制檯輸出返回爲 undefined

使用prop屬性代替attr屬性就完美解決了。

官方定義:

attr() 方法設置或返回被選元素的屬性和值。

當該方法用於返回屬性值,則返回第一個匹配元素的值。

當該方法用於設置屬性值,則爲匹配元素設置一個或多個屬性/值對。

 

prop() 方法設置或返回被選元素的屬性和值。

當該方法用於返回屬性值時,則返回第一個匹配元素的值。

當該方法用於設置屬性值時,則爲匹配元素集合設置一個或多個屬性/值對。

$('').attr()返回的是html對象

$('').prop()返回的是DOM對象

prop()

方法操作radio(checkbox)之類的控件,讓其選中的時候,其控件選中的值也會隨之改變。即既可以控制其選中,也能控制其取消選中;

類似於$("...").attr("checked");返回的是true或者false

如果有相應的屬性,返回的是該屬性,如果沒有則返回空串

attr()

方法操作adio(checkbox)之類的控件,讓其選中的時候,其控件選中的值不會隨之改變。即只能控制其選中,不能控制其取消選中;

類似於$("...").attr("checked");返回的是'checked'或者undefined

如果有相應的屬性,返回的是該屬性,如果沒有則返回undefined

attr和prop的使用場景:

1.添加屬性名稱該屬性就會生效應該使用prop();

2.是有true,false兩個屬性使用prop();(如'checked','selected','disabled'等)

3.其他則使用attr();

官方推薦使用:

圖片走丟了


YouTube頂部效果

<html>
    <head>
        <title>Red laser bar loading progess</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
         
        <script type='text/javascript'>
         $({property: 0}).animate({property: 100}, {
                duration: 3000,
                step: function() {
                    var percentage = Math.round(this.property);
 
                    $('#progress').css('width',  percentage+"%");
 
                     if(percentage == 100) {
                         $("#progress").addClass("done");//完成,隱藏進度條
                     }
                }
            });
        </script>
        <style type="text/css">
            body{
                margin:0;
            }
            #progress {
                position:fixed;
                height: 2px;
                background:#ff0000;
                transition:opacity 500ms linear
            }
            #progress.done {
                opacity:0
            }
            #progress span {
                position:absolute;
                height:2px;
                -webkit-box-shadow:#ff0000 1px 0 3px 1px;
                box-shadow:#ff0000 1px 0 1px 1px;
                -webkit-border-radius:100%;
                opacity:1;
                width:100%;
                right:-10px;
                -webkit-animation:pulse 2s ease-out 0s infinite;
                animation:pulse 1s ease-out 0s infinite;
            }
 
            @-webkit-keyframes pulse {
                30% {
                    opacity:.2;
                }
                45%{
                    opacity:.3;
                }
                60% {
                    opacity:.1;
                }
                100% {
                    opacity:.2;
                }
            }
             
        </style>
    </head>
    <body>
        <div id="progress">
            <span></span>
        </div>
    </body>
</html>

Windows服務器任務計劃:

第一次試驗:開頭路徑爲php目錄下php-cgi.exe的位置,後面爲要調用的文件位置

phptest.bat

d:\BtSoft\WebSoft\php\7.0\php-cgi.exe -f g:\phptest.php

phptest.php

<?php
$fp = @fopen("g:/phptest.txt", "a+");

fwrite($fp, "自動啓動調用php,時間:\n" . date("Y-m-d H:i:s"));

fclose($fp);

點擊phptest.bat後調用phptest.php讓phptest.txt輸入文字。成功!

 

第二次試驗:定時調用接口

urltest.bat

d:\BtSoft\WebSoft\php\7.0\php-cgi.exe -f g:\url.php

urltest.php

<?php
file_get_contents("http://www.joking.com/phptest.php");

點擊urltest.bat後依舊調用了phptest.php使phptest.txt輸入文字,成功!

 

第三次試驗:

當我的www.joking.com目錄下使用TP5時:

當然要使用php命令需要在配置好環境變量

然後進入TP5目錄下執行php think命令

這裏失敗了幾次,注意php環境變量php版本與tp版本兼容問題

task.bat

D:
cd D:\wwwroot\www.joking.com
php think test

在application/command.php文件下聲明

<?php
return [
    'app\index\command\Test'
];

在application\index\command下創建Test.php

<?php
namespace app\index\command;
 
use think\console\Command;
use think\console\Input;
use think\console\Output;
 
class Test extends Command
{
    protected function configure()
    {
        $this->setName('test')->setDescription('Here is the remark ');
    }
 
    protected function execute(Input $input, Output $output)
    {
        //這裏進行操作
        $output->writeln("joking");
    }
}

手打的命令行是成功了,點擊bat秒關看不出效果 

C:\Users\Administrator>cd..

C:\Users>cd..

C:\>D:

D:\>cd D:\wwwroot\www.hukang.com

D:\wwwroot\www.joking.com>php think test
joking

D:\wwwroot\www.joking.com>

剩下的就是windows任務計劃程序的事了。。

 

任務計劃程序任務計劃程序

操作: 新建:指定要運行的文件

觸發器:運行文件的時間週期

這裏沒什麼要寫的,全是可視化工具


vue-wechat-title

Vuejs 單頁應用在iOS系統下部分APP的webview中 標題不能通過 document.title = xxx 的方式修改

該插件只爲解決該問題而生(兼容安卓)

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    { 
        path: '/', name: 'login', 
        component: r => { require(['./login/Login'], r) },
        meta: { title: 'console 登錄' }}
]

export default new VueRouter({
    routes: routes
})
//main.js 里加上則一行

Vue.use(require('vue-wechat-title'))
<!-- 任意元素中加 v-wechat-title 指令 建議將標題放在 route 對應meta對象的定義中 -->
<div v-wechat-title="$route.meta.title"></div>
<!--or-->
<router-view v-wechat-title="$route.meta.title"></router-view>

npm傳送門


 頁面拖拽移動

#div {
        width : 200px;
        height: 200px;
        position: absolute;
        background: #99dd33;
        cursor: move;
 }
// js代碼
    window.onload=function() {
    var disX = disY = 0;                         // 鼠標距離div的左距離和上距離
    var div1 = document.getElementById("div1");  // 得到div1對象
     
    // 鼠標按下div1時
    div1.onmousedown = function(e) {
        var evnt = e || event;                   // 得到鼠標事件
        disX = evnt.clientX - div1.offsetLeft;   // 鼠標橫座標 - div1的left
        disY = evnt.clientY - div1.offsetTop;    // 鼠標縱座標 - div1的top
         
        // 鼠標移動時
        document.onmousemove = function(e) {
            var evnt = e || event;
            var x = evnt.clientX - disX;
            var y = evnt.clientY - disY;
            var window_width  = document.documentElement.clientWidth  - div1.offsetWidth;
            var window_height = document.documentElement.clientHeight - div1.offsetHeight;
             
            x = ( x < 0 ) ? 0 : x;                          // 當div1到窗口最左邊時
            x = ( x > window_width ) ? window_width : x;    // 當div1到窗口最右邊時
            y = ( y < 0 ) ? 0 : y;                          // 當div1到窗口最上邊時
            y = ( y > window_height ) ? window_height : y;  // 當div1到窗口最下邊時
             
            div1.style.left = x + "px";
            div1.style.top  = y + "px";
        };
         
        // 鼠標擡起時
        document.onmouseup = function() {
            document.onmousemove =null;
            document.onmouup = null;
        };
         
        return false;
    };
};

 JS獲取TXT文件內容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS獲取TXT文件內容</title>
    </head>

    <body>
        <input type='file' accept='text/plain' onchange='openFile(event)'><br>
        <div id="output"></div>
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        var openFile = function(event) {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function() {
                if(reader.result) {
                    //顯示文件內容
                    $("#output").html(reader.result);
                }
            };
            reader.readAsText(input.files[0]);
        };
    </script>

</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章