吴思奇的个人博客(⁄ ⁄•⁄ω⁄•⁄ ⁄)~

标签 JavaScript 下的文章

10月 27

用JavaScript实现随机提取指定的图片作为网页背景

其实这个功能几个月前都实现了,但是写法有些问题,打算修改下,换个写法。

思路

提取网站下的images里的background文件夹里6张图里的随机取一张图,作为网页背景。
js直接放在了header.php尾部。

用在自己网站的代码

<script>

bg_img= ['<?php $this->options->themeUrl('images/background/1.jpg'); ?>',
         '<?php $this->options->themeUrl('images/background/2.jpg'); ?>',
         '<?php $this->options->themeUrl('images/background/3.jpg'); ?>',
         '<?php $this->options->themeUrl('images/background/4.jpg'); ?>',
         '<?php $this->options->themeUrl('images/background/5.jpg'); ?>',
         '<?php $this->options->themeUrl('images/background/6.jpg'); ?>'];  //调用图片路径(我网站模板是用的themeUrl函数获取当前模板路径,根据实际情况决定怎么写)

document.getElementsByTagName("body")[0].style.background = "url("+bg_img[Math.floor(Math.random()*(bg_img.length))]+")";//随机背景图
document.getElementsByTagName("body")[0].style.backgroundPosition = "center";
document.getElementsByTagName("body")[0].style.backgroundRepeat = "no-repeat";
document.getElementsByTagName("body")[0].style.backgroundAttachment = "fixed";

</script>

不用php也可以这样写

<script>

bg_img = ["http://xxxx/1.jpg", 
          "http://xxx/2.jpg", 
          "http://xxx/3.jpg", 
          "http://xxx/4.jpg", 
          "http://xxx/5.jpg", 
          "http://xxx/6.jpg"]; //调用图片地址/路径(改为自己的)

document.getElementsByTagName("body")[0].style.background = "url("+bg_img[Math.floor(Math.random()*(bg_img.length))]+")";//随机背景图
document.getElementsByTagName("body")[0].style.backgroundPosition = "center";
document.getElementsByTagName("body")[0].style.backgroundRepeat = "no-repeat";
document.getElementsByTagName("body")[0].style.backgroundAttachment = "fixed";

</script>

写的时候遇到的问题

开始错用了document.body ,发现这个除了IE,其他浏览器都不认。
改为了document.getElementsByTagName。
开始为了图方便 把JS文件放到头部了。导致执行这个js的时候,body还没有出现的情况,一般js要放在html末尾(后)

关于getElementsByTagName()

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

语法

document.getElementsByTagName(tagname)

返回值

类型:NodeList 对象,描述:指定标签名的元素集合

浏览器支持

所有主要浏览器都支持 getElementsByTagName() 方法

03月 21

JS调用,防止F12审查元素

今天在群里看到有人说某网站,只要一按F12打开调试工具,网页就自动关闭。我闲得无聊就去研究了下,把上面的JS代码抓出来了

这段JavaScript代码,只要按下F12,网页立即空白关闭。

同时还能判断当前窗口内页高度和窗口高度,如果差值大于200,那么也要关闭

<script>
function fuckyou(){
      window.close(); //关闭当前窗口
     window.location="about:blank"; //将当前窗口跳转置空白页
}
  function ck() {
    console.profile();
    console.profileEnd();
    //判断一下profiles里面有没有东西,如果有,就呵呵
    if(console.clear) { console.clear() };
                        if (typeof console.profiles =="object"){
    return console.profiles.length > 0;
                        }
}
function hehe(){
if( (window.console && (console.firebug || console.table && /firebug/i.test(console.table()) )) || (typeof opera == 'object' && typeof opera.postError == 'function' && console.profile.length > 0)){
  fuckyou();
}
if(typeof console.profiles =="object"&&console.profiles.length > 0){
fuckyou();
}
}
hehe();
window.onresize = function(){
if((window.outerHeight-window.innerHeight)>200)
//判断当前窗口内页高度和窗口高度,如果差值大于200,那么呵呵
   fuckyou()
};
</script>


看到这些方法的命名,原作者是满满的嘲讽啊=。=~


此代码还有很多不足的地方,如果是为了防止网站被扒,还是慎用。

比如打开空白页后,再跳转到网页,(firebug不关)照样可以看到网页代码。

与其说防新人按F12看源码呢~不如说给网站被扒衣增加那么丁点难度~ 233333