目錄
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的位置,後面爲要調用的文件位置
d:\BtSoft\WebSoft\php\7.0\php-cgi.exe -f g:\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輸入文字。成功!
第二次試驗:定時調用接口
d:\BtSoft\WebSoft\php\7.0\php-cgi.exe -f g:\url.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版本兼容問題
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>
頁面拖拽移動
#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>