2015年12月15日火曜日

ページ上にあるイメージを回転する Javascript CSS

ページ上にあるイメージを回転する Javascript CSS。


var j = 0;
var x= document.getElementsByTagName('img')[12];
var x= document.getElementsByTagName('img')[0];

setInterval(deg,30);
function deg(){
       console.log(j);
       x.style.transform = "rotate(" + j + "deg)";
       x.style.transform = "rotate(" + Math.random()*10 + "deg)"
       j++;
}


一定方向に回転します。
x.style.transform = "rotate(" + j + "deg)"; 


不定に回転します。
x.style.transform = "rotate(" + Math.random()*10 + "deg)"



/////////////////////////////////////////

マウスは画像上に移動(mousemove)の時、画像が回転します。
var j = document.getElementsByTagName('img');
for (var i=0; i < j.length; i++){
      j[i].addEventListener("mousemove",function(){this.style.transform = "rotate(" + Math.random()*10 + "deg)",30},false);
}

//////////////////////////////////////////
すべてのimgを回転する。
setInterval(xxx,300);
var i =0;
function xxx(){
        var x = document.getElementsByTagName('img');
        for(var j=0; j< x.length; j++){
                 x[j].style.transform = "rotate(" + i + "deg)";
                 x[j].style.transform = "rotate(" + Math.random()*10 + "deg)";
       }
    i++;
}


///////////////////////////////////////////
すべてのいメールは左右を回転します。360°折り返し

setInterval(xxx,25);
var i =0;
var chk = 0;
function xxx(){
        var x = document.getElementsByTagName('img');
        for(var j=0; j< x.length; j++){
                x[j].style.transform = "rotate(" + i + "deg)";
                //x[j].style.transform = "rotate(" + Math.random()*1 + "deg)";
        }

       if(chk == 0){
                i++;
                if(i == 360){
                        chk = 1;
               }
        }

       if(chk == 1){
                i--;
                if(i == 0){
                       chk = 0;
               }

          }
}
///////////////////////////////////////




例:

2015年12月6日日曜日

DOM 操作

var x = document.getElementById('topMain');

//親要素
element.parentNode;
element.parentElement;

//子要素
element.firstElementChild; //最初の子要素
x.firstChild;
element.lastElementChild;  //最後の子要素
x.lastChild;
element.children; //子要素リスト
x.childNodes;
x.childElementCount;


//1つ前の要素
element.previousElementSibling;
x.previousSibling;

//1つ後の要素
element.nextElementSibling;
x.nextSibling



//要素の作成
var div = document.createElement('div');
div.textContent = 'hoge';
 x.innerText = 'hoge';


//最後の子要素として追加
element.appendChild(div);


//最初の子要素として追加
element.insertBefore(div, element.firstChild);


//要素の直前に追加
element.parentNode.insertBefore(div, element);

//要素の直後に追加
element.parentNode.insertBefore(div, element.nextSibling);
要素の削除

//特定の子要素削除
element.removeChild(child);

//自分を削除
element.parentNode.removeChild(element);

//子要素を全て削除
while (element.firstChild) element.removeChild(element.firstChild);

//子要素を全て削除(part2)
element.textContent = null;
属性の操作

//属性の取得
element.getAttribute('href');

//属性を設定
element.setAttribute('href', 'http://localhost:3000');

//属性を削除
element.removeAttribute('href');
スタイル関連操作

//class追加
element.classList.add('active');

//class削除
element.classList.remove('active');

//classをトグル
element.classList.toggle('active');

//スタイルを直接指定
element.style.backgroundColor = '#ff0000';

SQLITE3


.d  dump
.e  exit
.h help
.i
.q exit
.s schema
.v ver


NULL       NULL値
INTEGER    符号付整数。1, 2, 3, 4, 6, or 8 バイトで格納
REAL       浮動小数点数。8バイトで格納
TEXT       テキスト。UTF-8, UTF-16BE or UTF-16-LEのいずれかで格納
BLOB       Binary Large OBject。入力データをそのまま格納


CREATE TABLE テーブル名(カラム名 PRIMARY KEY, ...);
CREATE TABLE テーブル名(カラム名1, カラム名2, ... , PRIMARY KEY(カラム名1, カラム名2, ...));
CREATE TABLE テーブル名(カラム名 INTEGER PRIMARY KEY, ...);
CREATE TABLE テーブル名(カラム名 INTEGER PRIMARY KEY AUTOINCREMENT, ...);
CREATE TABLE テーブル名(カラム名 NOT NULL, ...);
CREATE TABLE テーブル名(カラム名 UNIQUE, ...);
CREATE TABLE テーブル名(カラム名 DEFAULT 値, ...);
CREATE TABLE テーブル名(カラム名 CHECK(条件式), ...);
CREATE INDEX インデックス名 ON テーブル名(カラム名1, カラム名2, ...);
CREATE UNIQUE INDEX インデックス名 ON テーブル名(カラム名1, カラム名2, ...);
CREATE VIEW ビュー名 AS SELECT文;
CREATE TRIGGER トリガー名 [ BEFORE | AFTER | INSTEAD OF]

CURRENT_TIME         HH:MM:SS形式
CURRENT_DATE         YYYY-MM-DD形式
CURRENT_TIMESTAMP    YYYY-MM-DD HH:MM:SS形式



 { DELETE | UPDATE [OF カラム名, ...] | INSERT } ON テーブル名
 [ FOR EACH ROW | FOR EACH STATEMENT ]
 [ WHERE 条件式 ]
 BEGIN
  SQL文1;
  SQL文2;
  ...
 END;
CREATE TRIGGER トリガー名 UPDATE OF カラム名 ON テーブル名
 BEGIN
  SQL文1;
  SQL文2;
  ...
 END;
CREATE TRIGGER トリガー名 DELETE ON テーブル名
 BEGIN
  SQL文1;
  SQL文2;
  ...
 END;
CREATE TRIGGER トリガー名 INSERT ON テーブル名
 BEGIN
  SQL文1;
  SQL文2;
  ...
 END;


INSERT INTO テーブル名 VALUES(値1, 値2, ...);
INSERT INTO テーブル名(カラム1, カラム2, ...) VALUES(値1, 値2, ...);
INSERT INTO テーブル名 DEFAULT VALUES;
INSERT INTO テーブル名 SQL文;
INSERT INTO テーブル名(カラム名1, カラム名2, ...) SQL文;
REPLACE INTO tbl1 VALUES(1,'古田一郎', '埼玉県', 30);

UPDATE テーブル名 SET カラム名1 = 値1, カラム名2 = 値2, ... WHERE 条件式;
UPDATE テーブル名 SET カラム名1 = 値1, カラム名2 = 値2, ...;

SELECT カラム名1, カラム名2, ... FROM テーブル名;
SELECT カラム名 , ... FROM テーブル名 ORDER BY カラム名1 [ASC | DESC], カラム名2 [ASC | DESC], ...;
SELECT カラム名 , ... FROM テーブル名 WHERE 条件式;
SELECT カラム名 , ... FROM テーブル名 WHERE カラム >= 値1 AND カラム <= 値2;
SELECT カラム名 , ... FROM テーブル名 WHERE カラム BETWEEN 値1 AND 値2;
SELECT カラム名 , ... FROM テーブル名 WHEREカラム NOT BETWEEN 値1 AND 値2;
SELECT カラム名 , ... FROM テーブル名 WHERE カラム >= 値1 OR カラム <= 値2 OR ...;
SELECT カラム名 , ... FROM テーブル名 WHERE カラム IN(値1, 値2, ...);
SELECT カラム名 , ... FROM テーブル名 WHERE カラム NOT IN(値1, 値2, ...);
SELECT カラム名 , ... FROM テーブル名 WHERE カラム IN(SELECT カラム名 FROM テーブル名);
SELECT カラム名 , ... FROM テーブル名 WHERE カラム NOT IN(SELECT カラム名 FROM テーブル名);
SELECT カラム名 , ... FROM テーブル名 WHERE カラム LIKE パターン;
 select author from vid where author like '%kan%';
SELECT カラム名 , ... FROM テーブル名 WHERE カラム LIKE パターン ESCAPE エスケープ文字;
SELECT カラム名 , ... FROM テーブル名 WHERE カラム GLOB パターン;
SELECT カラム名 , ... FROM テーブル名 WHERE カラム IS NULL;
SELECT カラム名 , ... FROM テーブル名 WHERE カラム IS NOT NULL;
SELECT カラム名 AS 別名, ... FROM テーブル名;
SELECT DISTINCT カラム名, ... FROM テーブル名;
SELECT ALL カラム名, ... FROM テーブル名;
SELECT カラム名, ... FROM テーブル名 LIMIT 行数;
SELECT カラム名, ... FROM テーブル名 LIMIT 行数 OFFSET 開始位置;
SELECT カラム名, ... FROM テーブル名 LIMIT 開始位置, 行数;
SELECT カラム名 演算子 値 FROM テーブル名;
SELECT
  CASE
    WHEN 条件式1 THEN 値1
    WHEN 条件式2 THEN 値2
    ELSE 値3
  END
FROM テーブル名;
SELECT
  CASE 式
    WHEN 値1 THEN 式1
    WHEN 値2 THEN 式2
    ELSE 式3
  END
FROM テーブル名;
SELECT カラム名, ... FROM テーブル名 GROUP BY カラム名, カラム名, ...;
SELECT カラム名, ... FROM テーブル名 WHERE 条件式 GROUP BY カラム名, ...;
SELECT カラム名, ... FROM テーブル名 GROUP BY カラム名, ... HAVING 条件式;
SELECT テーブル名.カラム名, ... FROM テーブル名1 INNER JOIN テーブル名2 ON テーブル名1.カラム名1 = テーブル名2.カラム名2;
SELECT テーブル名.カラム名, ... FROM テーブル名1 LEFT OUTER JOIN テーブル名2 ON テーブル名1.カラム名1 = テーブル名2.カラム名2;
SELECT テーブル名.カラム名, ... FROM テーブル名1 RIGHT OUTER JOIN テーブル名2 ON テーブル名1.カラム名1 = テーブル名2.カラム名2;
SELECT テーブル名.カラム名, ... FROM テーブル名1 FULL OUTER JOIN テーブル名2 ON テーブル名1.カラム名1 = テーブル名2.カラム名2;
SELECT テーブル名.カラム名, ... FROM テーブル名1 CROSS JOIN テーブル名2 ON テーブル名1.カラム名1 = テーブル名2.カラム名2;
SELECT テーブル名.カラム名, ... FROM テーブル名1 NATURAL INNER JOIN テーブル名2;
SELECT テーブル名.カラム名, ... FROM テーブル名1 NATURAL LEFT OUTER JOIN テーブル名2;
SELECT 別名1.カラム名, ... FROM テーブル名 別名1 INNER JOIN テーブル名 別名2 ON 別名1.カラム名 = 別名2.カラム名;

ALTER TABLE テーブル名 RENAME TO 新しいテーブル名;
ALTER TABLE テーブル名 ADD COLUMN カラム名[ データ型];
ALTER TABLE tbl_name ADD [COLUMN] column_definition;
ALTER TABLE tbl_name ADD [COLUMN] column_definition FIRST;
ALTER TABLE tbl_name ADD [COLUMN] column_definition AFTER col_name;
ALTER TABLE tbl_name DROP [COLUMN] col_name;c
ALTER TABLE tbl_name RENAME [TO] new_tbl_name;

DROP VIEW ビュー名;
DROP INDEX インデックス名;
DROP TRIGGER トリガー名;
DROP TABLE テーブル名
DELETE FROM テーブル名 WHERE 条件式;
DELETE FROM テーブル名;
VACUUM;


SQLite関数
SUM 総和を求める。
MAX 最大値を求める。
MIN 最小値を求める。
AVG 平均値を求める。
COUNT 総数を求める。
total(カラム名)

集計関数(Aggregate Functions)
count カラムまたはテーブルに含まれる行数を取得
select count(address) from customer;
select count(*) from customer;


sum  / total カラムの値の合計を取得
avg カラムの値の平均を取得
max  / min カラムの値の最大値と最小値を取得
group_concat グループ内のカラムの値を連結

日付/時刻関数(Date And Time Functions)
date  / time  / datetime 日付と時刻を取得
julianday 日付と時刻をユリウス日で取得
strftime 指定のフォーマットで日付と時刻を取得
Modifiers(修飾子)の指定
Modifiersの指定方法
// select date('now');



コア関数(Core Functions)
length 文字数を取得
lower  / upper 文字列を小文字/大文字に変換
replace 文字列を別の文字列に置換
substr 部分文字列を取得
trim  / rtrim  / ltrim 文字列の前後から特定の文字を取り除く
quote クォートした結果を取得
round 数値を四捨五入する
abs 数値の絶対値を取得
random 数値の乱数を生成
hex BLOB型の値を16進数表記する
randomblob BLOB型の値の乱数を生成
zeroblob 指定したバイト数分のBLOB型の0x00の値を生成
changes 直近に実行されたSQL文により更新/削除/追加された行数を取得
total_changes データベースに接続後にSQL文により更新/削除/追加されたトータル行数を取得
ifnull / coalesce NULLでない最初の値を取得
nullif 2つの値を比較し、等しければNULL、異なれば最初の値を返す
last_insert_rowid 最後に挿入された行のROWIDを取得
typeof 値のデータ型を取得
sqlite_version SQLiteのバージョンを取得




CREATE VIEW tp5 as select * from qeid where strftime('%s','now')-time<86400 orde
r by acc desc limit 5;

2015年12月1日火曜日

onkeydown の動作

onkeydown  の動作

e.addEventListener('keydown', chk);  
 'keyup' に変更してください。


[Javascript キーワード補完] 作成の下準備です。


<html>
<body>
<input type="text" id = "input"></input>
</body>
</html>
<script>

onload = function (){
        var e = document.getElementById('input');
        e.addEventListener('keydown', chk);
}

//onkeydown = function (){
//        var e = document.getElementById('input');
//        console.log(e.value);
//}


function chk(){
        var e = document.getElementById('input');
        console.log(e.value);
}

</script>


一回目のキーダウンは二回目押した時に反映されます。
ロマ入力した場合、




英語入力の場合、








2015年11月20日金曜日

Youku の API

Youku の API

Player API です。 YouTube IFrame APIと似ってます。
client_id の項目はYoutube にはない。





2015年11月1日日曜日

Chrome insert_js.js

manifest.json
//////////////////////////////////////////////////////

{
  "name": "YouTools",
  "version": "1.1",
  "description": "Plsylist Tools",
  "manifest_version":2,
   "background": {
      "scripts": [ "background.js" ]
   },
  "browser_action": {
"default_icon": "icon_16.png",
"default_popup": "default_popup.html"
  },
 
  "icons":{"19":"GB-19.png",
"48":"GB-48.png",
"128":"GB-128.png"
},
 
 
   
   "permissions": ["bookmarks",
"tabs",
"activeTab",
"idle",
"cookies",
"*://*/*",
"system.cpu" ,
"system.memory",
"system.storage",
"downloads",
"storage"],

"content_scripts":[{
"matches":["*://*/*"],
"js":["insert_js.js"]
                       }
]

}








insert_js.js
/////////////////////////////////////////////////////////

function body_color(){
var jjj = document.getElementsByTagName('body');
jjj[0].style.backgroundColor="rgba(114, 174, 185, 0.26)";
}

function abc(){
var jt = document.getElementsByClassName('more-menu-wrapper');
if(jt.length > 0){
chk = "ok";
}

var you_dl = document.getElementsByClassName("yt-alert yt-alert-default yt-alert-info  playlist-cleared-of-deleted-videos-alert");
if(you_dl.length > 0){
chk = "ng";
}

for(var i in jt){
if(jt[i].childNodes){
if(jt[i].childNodes.length === 1){
jt[i].parentNode.parentNode.style.backgroundColor = 'red';
var tt = document.getElementById('pl-header')
tt.style.backgroundColor = 'red';
var ttt = document.getElementById('yt-masthead-container');
ttt.style.backgroundColor = 'red';
chk = "ng";
}else{
//console.clear();
}
}
}
}


// class="yt-alert yt-alert-default yt-alert-info  playlist-cleared-of-deleted-videos-alert"


function chk_my_item(){
var tag = document.getElementsByClassName('yt-uix-sessionlink g-hovercard      spf-link ');
if(tag.length > 0){
for(var i in tag){
if(tag[i].href == 'https://www.youtube.com/user/XXXXXID' ||
  tag[i].href == 'https://www.youtube.com/user/XXXXXID' ||
  tag[i].href == "https://www.youtube.com/channel/UCNSXxplP-UWcZFz3-wDM3RQ" ||
  tag[i].href == "https://www.youtube.com/channel/UCKWg8wctnd4q7z_5ojOclKA" ||
  tag[i].href == "https://www.youtube.com/channel/UCk0QT-xjO1y4gsa2bFyNDjQ" ){
  tag[i].parentNode.parentNode.parentNode.style.backgroundColor='Gold';
}
}
}

var tag2 = document.getElementsByClassName('g-hovercard');
if(tag2.length > 0){
for(var x  in tag2){
if(tag2[x].innerText == "XXXID" ||
  tag2[x].innerText == "XXXXID" ||
  tag2[x].innerText == "XXXXXID" ){
  tag2[x].parentNode.parentNode.parentNode.style.backgroundColor='Gold';
}
}
}
}


function chk_del_user(){
var tag = document.getElementsByClassName('yt-uix-sessionlink g-hovercard      spf-link ');
if(tag.length > 0){
for(var i in tag){
if(
tag[i].href == 'https://www.youtube.com/channel/UCPv4x_sLkl8tsBCS--aoASQ' ||
tag[i].href == 'https://www.youtube.com/channel/UC41FuIPvXyIYFjoGU-UCNSw' ||
tag[i].href == 'https://www.youtube.com/user/RyansLyfe' ||
tag[i].href == 'https://www.youtube.com/channel/UCQjh-JVPNWfY-KsZS3RgRHw' ||
tag[i].href == 'https://www.youtube.com/user/ClevverNews' ||
tag[i].href == 'https://www.youtube.com/channel/UCPOzcixjIIj-F7WxtFLoeWA' ||
tag[i].href == 'https://www.youtube.com/channel/UCvTDwUGW41jGzrKUrNAjW3w' ||
tag[i].href == 'https://www.youtube.com/channel/UCIrzk08B6OHq6CTEi5LTM-A' ||
tag[i].href == 'https://www.youtube.com/channel/UCiw-Il_jgZlDokbIXOBAwBw' ||
tag[i].href == 'https://www.youtube.com/channel/UCCwEw5ZlP3QmgISJplp4rNA' ||
tag[i].href == 'https://www.youtube.com/channel/UCj_TUjpxaS1iuK8roR7bB0w' ||
tag[i].href == 'https://www.youtube.com/channel/UCe9sr3nyVycsbXB1PlJQ63w' ||
tag[i].href == 'https://www.youtube.com/channel/UCarB6_K5Hy422asmDX9T1ew' ||
tag[i].href == 'https://www.youtube.com/channel/UCAuxXt4w3hAJJKA_Xy5mDZQ' ||
tag[i].href == 'https://www.youtube.com/channel/UCfG-I3AEbrxM0bp3xCJVk5g' ||
tag[i].href == 'https://www.youtube.com/channel/UC9a6e6Hd7ShWcnGkNVcomoA' ||
tag[i].href == 'https://www.youtube.com/channel/UCNwgG5F2W8OJ4G37WYh1RqA' ||
tag[i].href == 'https://www.youtube.com/channel/UCMbTe5JqeDWsEHcbIzapiAQ' ||
tag[i].href == 'https://www.youtube.com/channel/UC5S_v9ReRER5VHPciNPabQw'
  ){
  tag[i].parentNode.parentNode.parentNode.style.backgroundColor='red';
  chk = "ng";
}
}
}
}


function auto_link(){
var ja = document.getElementsByClassName('vm-video-title-text yt-uix-sessionlink');
var cont = ja.length;

function aut(){
cont = cont -1;
if(opener == null && location.pathname == "/view_all_playlists"){
document.title = cont;
}

if(ja[cont]){
oper = open(ja[cont].href);
if(oper.readyState = 4){
var scont = oper.document.getElementById("masthead-search-term");
console.log(scont);
}
}

if(cont < 0 ){
clearInterval(opentime);
if(opener == null && location.pathname == "/view_all_playlists"){
document.title = "end";
}
}
}

opentime = setInterval(aut,2500);
}

onchange = function(){
abc();
chk_my_item();
}

onmousemove = function(){
chk = "ng";
body_color();
chk_my_item();
if(typeof(opentime) != "undefined"){
clearInterval(opentime);
}
if(typeof(closetime) != "undefined"){
clearTimeout(closetime);
}
abc();
}

onmouseover = function(){
chk = "ng";
body_color();
chk_my_item();
if(typeof(opentime) != "undefined"){
clearInterval(opentime);
}
if(typeof(closetime) != "undefined"){
clearTimeout(closetime);
}
abc();
}

onload = (function(){
chk = "ng";
abc();
chk_my_item();
chk_del_user();
if(chk == "ok" && opener.location.hostname == "www.youtube.com"){
closetime = setTimeout(close,3000);
}
setTimeout(auto_link,6000);
})()





2015年10月31日土曜日

YouTube 埋め込みプレーヤー

YouTube 埋め込みプレーヤー

nextVideo

previousVideo

playVideo

stopVideo

pauseVideo

seekTo30

mute

volumeP

volumeM