JS获取TXT文件内容与 YouTube顶部效果

最新推荐文章于 2022-06-11 15:55:41 发布

深海霸主丶痞老板

最新推荐文章于 2022-06-11 15:55:41 发布

阅读量514

点赞数

文章标签：杂记

本文链接：https://blog.csdn.net/qq_38062409/article/details/95784625

版权

Life 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

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>