demo集合

Melody–Zhang

于 2019-10-08 13:06:14 发布

阅读量374

点赞数

分类专栏：小题

本文链接：https://blog.csdn.net/qq_15548121/article/details/102377836

版权

小题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>JavaScript实现的抽奖效果 数字跳动版 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <style type="text/css">
        .a1
        {
            position: relative;
            font-family: Verdana;
            font-size: 200px;
            color: #888888;
        }
    </style>

    <script language="JavaScript">
        function Lottery() {
            var Nos = Math.round(Math.random() * (4999 - 1) + 1);

            var result = document.getElementById("layer1");
            if (result != null) {
                result.innerHTML = Nos;
            }

            T = setTimeout('Lottery()', 10);
        }
        //-->
    </script>

</head>
<body>
<div>
    <input type="button" value='Lottery Number Picker' onclick="Lottery();setTimeout('clearTimeout(T)',2000);" />
</div>
<div>
    <span id="layer1" class="a1">Result</span>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动漫投票</title>
</head>
<!-- 这里使用了一张背景，注释掉了。
<body style="background-image:url(body.jpeg); background-size:100%; background-repeat: no-repeat;">
 -->
<body>
<div align="center"><img src="head2.jpg"/></div>
<div align="center">
    <h4>热门动漫投票</h4>
    <table id="main">
        <tr>
            <td>
                <input type="radio" name="option" checked="checked"/>猫和老鼠
            </td>
        </tr>
        <tr>
            <td style="width:550px">
                <div id=0 style="background-color:#acd6ff; width:0; height:20px; border-width:0px;">
                </div>
            </td>
            <td>
                <label id="label0">0</label>票
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="option"/>海贼王
            </td>
        </tr>
        <tr>
            <td>
                <div id=1
                     style="background-color:#0066cc; height:20px; width:0; border-width:0px; border-color:blue; border-style:solid ; text-align:right;"></div>
            </td>
            <td>
                <label id="label1">0</label>票
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="option"/>喜羊羊
            </td>
        </tr>
        <tr>
            <td>
                <div id=2
                     style="background-color:#ff7575; height:20px;width:0;  border-width:0px; border-color:blue; border-style:solid ; text-align:right;"></div>
            </td>
            <td>
                <label id="label2">0</label>票
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="option"/>其他
            </td>
        </tr>
        <tr>
            <td>
                <div id=3
                     style="background-color:#5cadad;height:20px;width:0; border-width:0px; border-color:blue; border-style:solid ; text-align:right;"></div>
            </td>
            <td>
                <label id="label3">0</label>票
            </td>
        </tr>
        <tr>
            <td><p>
                <input type="submit" value="确认投票" onclick="vote()"/>
            </td>
        </tr>
        <tr>
            <td><p>
                <input type="submit" value="30次投票" onclick="votAlways()"/>
            </td>
        </tr>
    </table>
</div>
</body>
<script type="text/javascript">

    //在每个投票选项后面写了个div，用div的宽度来代表当前该选项的投票数。
    function vote() {    //函数vote，当点击确认投票的时候，调用vote方法

        //for循环的条件是，所有投票选项的个数。
        for (var i = 0; i < document.getElementsByName("option").length; i++) {

            //查找到是哪个投票选项被选中
            if (document.getElementsByName("option")[i].checked == true) {
                var width = document.getElementById(i).style.width; //获取到当前选项的宽度。
                width = parseInt(width);//将宽度转化为int型，因为获取到的width的单位是px
                width += 3;//改变width的值，这里就是定义每次投票的进度条的增速
                document.getElementById(i).style.width = width + "px";//修改原div的宽度

                var label = "label" + i;//lable标签里面写的是当前的投票数目。
                var num = document.getElementById(label).innerText;//获取到当前的票数
                document.getElementById(label).innerText = ++num;//票数加1，并修改原值
            }
        }

        //alert("投票成功");

    }
    function votAlways() {
for(var i=0;i<=30;i++){
    vote();
}
    }
</script>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>框框随着鼠标点击的元素的位置改变而改变</title>
    <style type="text/css">
        /*基本css 包含 base,form,table,tab,layout,menu,hover,selected,popBox,pages,*/
        /* CSS reset 全局样式*/
        html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, a, span, img {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            max-height: 100%;
            overflow: hidden;
        }
        body {
            min-width: 1024px;
            font-size: 12px;
            font-family: "Microsoft YaHei", 微软雅黑, "Microsoft JhengHei", 华文细黑, STHeiti, MingLiu;
            color: #464c5b;
            height: 100%;
            max-height: 100%;
            overflow: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            -webkit-text-size-adjust: none;
        }
        textarea {
            font-size: 12px;
            font-family: "Microsoft YaHei", 微软雅黑, "Microsoft JhengHei", 华文细黑, STHeiti, MingLiu;
            color: #464c5b;
            vertical-align: middle;
            margin: 4px 0;
        }
        a.mouseposition{
            border: 1px solid #ddd;
            margin: 20px;
            width: 60px;
            height: 30px;
            line-height: 30px;
            display: block;
            text-align: center;
        }
        .pop{
            width: 350px;
            height: 200px;
            border: 1px solid #ddd;
            background-color: #f7f7f7;
            display: none;
            position:absolute;  /* 注：弹出框必须为绝对定位 */
        }
        .popTitle{
            height:24px;line-height:24px;font-size:14px;padding:0 4px;border-bottom:1px solid #ddd;
        }
        /*弹出框关闭按钮*/
        .closeWindow {
            width: 24px;
            height: 24px;
            cursor: pointer;
            position: absolute;
            top: 0px;
            left: 92%;
            background: url("../img/closeTab.png") center center no-repeat;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
    <script type="text/javascript">

        function showdetails(thisObj,thisId){
            var d = $(thisObj);
            var pos = d.offset();
//            var t = pos.top + d.height(); // 弹出框的上边位置
            var t = pos.top ; // 弹出框的上边位置
            var l = pos.left + d.width();  // 弹出框的左边位置
            $("#details").css({ "top": t, "left": l }).show();
            $("#textareaid").val($("#"+thisId).text());
        }
        function hidedetails(){
            $("#details").hide();
        }
    </script>
</head>
<body>
<a class="mouseposition" href="javascript:void(0)" id="this1" onclick="showdetails(this,'this1')" >订单1</a>
<a class="mouseposition" href="javascript:void(0)" id="this2" onclick="showdetails(this,'this2')" >订单2</a>
<a class="mouseposition" href="javascript:void(0)" id="this3" onclick="showdetails(this,'this3')">订单3</a>
<a class="mouseposition" href="javascript:void(0)" id="this4" onclick="showdetails(this,'this4')">订单4</a>
<a class="mouseposition" href="javascript:void(0)" id="this5" onclick="showdetails(this,'this5')">订单5</a>
<div id="details" class="pop">
    <p class="popTitle">
        <b>显示内容</b>
        <b class="closeWindow" onclick="hidedetails()"></b>
    </p>
    <div style="padding:4px;">
        <textarea id="textareaid" name="text" cols="30" rows="10" style="width:340px;height:160px;" readonly>这是一个textarea</textarea>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>多级菜单</title>
    <meta charset="utf-8" />
    <style>
        /*globle*/
        ul, li{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        a{
            display: inline-block;
            width: 100%;
            height: 31px;
            text-decoration: none;
            color: #fff;
            font-size: 13px;
        }
        a:hover{
            background: #52718A;
        }
        /*sidebar*/
        .sidebar{
            width: 210px;
            height: 335px;
            margin: 50px auto;
            border-radius: 5px;
            font: 14px '新宋体';
            color: #f4f4f4;
        }
        .title{
            width: 95%;
            line-height: 32px;
            border-bottom: 1px solid #ccc;
            background: #1ABC9C;
            cursor: pointer;
        }
        .title > span{
            margin-left: 10px;
        }
        /*in-sidebar*/
        .in-sidebar{
            width: 100%;
            display: none;
        }
        .in-sidebar > li{
            width: 100%;
            height: 32px;
            background: #34495E;
            line-height: 32px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
<!--sidebar-->
<div class="sidebar">
    <ul>
        <li class="title"><span>一、HTML5基础教程</span>
            <ul class="in-sidebar">
                <li><a href="test1.html">HTML5基础教程1</a></li>
                <li><a href="#" onclick="a()">HTML5基础教程2</a></li>
                <li><a href="#" onclick="a()">HTML5基础教程3</a></li>
                <li><a href="#" onclick="a()">HTML5基础教程4</a></li>
                <li><a href="#" onclick="a()">HTML5基础教程5</a></li>
            </ul>
        </li>
        <li class="title"><span>二、CSS3基础教程</span>
            <ul class="in-sidebar">
                <li><a href="#">CSS3基础教程1</a></li>
                <li><a href="#">CSS3基础教程2</a></li>
                <li><a href="#">CSS3基础教程3</a></li>
                <li><a href="#">CSS3基础教程4</a></li>
                <li><a href="#">CSS3基础教程5</a></li>
            </ul>
        </li>
        <li class="title"><span>三、Javascript基础教程</span>
            <ul class="in-sidebar">
                <li><a href="#">Javascript基础教程1</a></li>
                <li><a href="#">Javascript基础教程2</a></li>
                <li><a href="#">Javascript基础教程3</a></li>
                <li><a href="#">Javascript基础教程4</a></li>
                <li><a href="#">Javascript基础教程5</a></li>
            </ul>
        </li>
        <li class="title"><span>四、NodeJs基础教程</span>
            <ul class="in-sidebar">
                <li><a href="#">NodeJs基础教程1</a></li>
                <li><a href="#">NodeJs基础教程2</a></li>
                <li><a href="#">NodeJs基础教程3</a></li>
                <li><a href="#">NodeJs基础教程4</a></li>
                <li><a href="#">NodeJs基础教程5</a></li>
            </ul>
        </li>
        <li class="title"><span>五、IOS基础教程</span>
            <ul class="in-sidebar">
                <li><a href="#">IOS基础教程1</a></li>
                <li><a href="#">IOS基础教程2</a></li>
                <li><a href="#">IOS基础教程3</a></li>
                <li><a href="#">IOS基础教程4</a></li>
                <li><a href="#">IOS基础教程5</a></li>
            </ul>
        </li>
    </ul>

</div>

<script src="../js/jquery-1.11.3.js"></script>
<script>
    $(function(){
        var tmp = null,
                $title = $('.title'),
                $con = $('.title > ul');

        $title.click(function(){
            $(tmp).children('ul').slideUp().end().children('.arrow').removeClass('arrow-up');
            $(this).children('ul').slideToggle().end().children('.arrow').addClass('arrow-up');
            tmp = this;
        });
        $con.click(function(){
            $(this).parent().children('ul').slideDown();
            return false;  // 阻止事件冒泡
        });
        function a(){
           alert('hello every one');
        }
    });

</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    #main {
        position: relative;
    }

    .pin {
        padding: 15px 0 0 15px;
        float: left;
    }

    .box {
        padding: 10px;
        border: 1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        border-radius: 5px;
    }

    .box img {
        width: 162px;
        height: auto;
    }
</style>
</head>
<body>
<div id="main">
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img  src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/right.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/left.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div> <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div> <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/right.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/left.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div> <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div> <div class="pin">
        <div class="box">
            <img src="../img/brand.jpg"/>
        </div>
    </div>
</div>
<script>
    window.onload = function () {

        waterfall('main', 'pin');

        var dataInt = {'data': [{'src': 'brand.jpg'}, {'src': 'left.jpg'}, {'src': 'right.jpg'}]};

        window.onscroll = function () {
            if (checkscrollside()) {
                var oParent = document.getElementById('main');// 父级对象
                for (var i = 0; i < dataInt.data.length; i++) {
                    var oPin = document.createElement('div'); //添加 元素节点
                    oPin.className = 'pin';     //添加 类名 name属性
                    oParent.appendChild(oPin);    //添加 子节点
                    var oBox = document.createElement('div');
                    oBox.className = 'box';
                    oPin.appendChild(oBox);
                    var oImg = document.createElement('img');
                    oImg.src = 'img/' + dataInt.data[i].src;
                    oBox.appendChild(oImg);
                }
                waterfall('main', 'pin');
            }
        }
    };

    /*
     parend 父级id
     pin 元素id
     */
    function waterfall(parent, pin) {
        var oParent = document.getElementById(parent);// 父级对象
        var aPin = getClassObj(oParent, pin);// 获取存储块框pin的数组aPin
        var iPinW = aPin[0].offsetWidth;// 一个块框pin的宽
        var num = Math.floor(document.documentElement.clientWidth / iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
        oParent.style.cssText = 'width:' + iPinW * num + 'px;margin:0 auto;';//设置父级居中样式：定宽+自动水平外边距

        var pinHArr = [];//用于存储 每列中的所有块框相加的高度。a
        for (var i = 0; i < aPin.length; i++) {//遍历数组aPin的每个块框元素
            var pinH = aPin[i].offsetHeight;
            if (i < num) {
                pinHArr[i] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr
            } else {
                var minH = Math.min.apply(null, pinHArr);//数组pinHArr中的最小值minH
                var minHIndex = getminHIndex(pinHArr, minH);
                aPin[i].style.position = 'absolute';//设置绝对位移
                aPin[i].style.top = minH + 'px';
                aPin[i].style.left = aPin[minHIndex].offsetLeft + 'px';
//数组 最小高元素的高 + 添加上的aPin[i]块框高
                pinHArr[minHIndex] += aPin[i].offsetHeight;//更新添加了块框后的列高
            }
        }
    }

    /*
     *通过父级和子元素的class类 获取该同类子元素的数组
     */
    function getClassObj(parent, className) {
        var obj = parent.getElementsByTagName('*');//获取 父级的所有子集
        var pinS = [];//创建一个数组 用于收集子元素
        for (var i = 0; i < obj.length; i++) {//遍历子元素、判断类别、压入数组
            if (obj[i].className == className) {
                pinS.push(obj[i]);
            }
        }
        return pinS;
    }
    /****
     *获取 pin高度 最小值的索引index
     */
    function getminHIndex(arr, minH) {
        for (var i in arr) {
            if (arr[i] == minH) {
                return i;
            }
        }
    }

    function checkscrollside() {
        var oParent = document.getElementById('main');
        var aPin = getClassObj(oParent, 'pin');
        var lastPinH = aPin[aPin.length - 1].offsetTop + Math.floor(aPin[aPin.length - 1].offsetHeight / 2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//注意解决兼容性
        var documentH = document.documentElement.clientHeight;//页面高度
        return (lastPinH < scrollTop + documentH) ? true : false;//到达指定高度后 返回true，触发waterfall()函数
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">


    <!--<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />-->
    <title>滚屏广告</title>
    <style type="text/css">
        ul, li {
            margin: 0;
           white-space:nowrap;
            padding: 0
        }

        #scrollDiv {
            background-color: #000;
            opacity: .9;
            color: #e4393c;
            position: fixed;
            bottom: 50px;
            width: 500px;
            height: 30px;
            min-height: 25px;
            line-height: 25px;
            border: #ccc 1px solid;
            border-radius: 5px;
            overflow: hidden;
        }

        #scrollDiv li {
            height: 25px;
            padding-left: 10px;
        }

        #scrollDiv li .time {
            color: #fff;
            padding-right:5px;
        }

        #scrollDiv li .type {
            width: 30px;
            color: #f0ad4e;
            margin-left:10px;
        }

        #scrollDiv li .text {
            width: 30px;
            color: #c1e2b3;
            margin: auto 10px;
        }

        #scrollDiv li .value {
            width: 30px;
            color: #fff;
        } #scrollDiv li .wValue {
            width: 30px;
            color: #e4393c;
        }


    </style>
    <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>

</head>

<body>
<div>
<p class="">背景图</p>
<div id="scrollDiv">
    <ul>
        <!--<li>${data[j]} <b>&tritime;</b></li>-->
    </ul>
</div>
</div>
<script type="text/javascript">
    (function ($) {
        var cyc = 0;
        $.fn.extend({
            Scroll: function (opt, callback) {
                //参数初始化
                if (!opt)
                    var opt = {};
                var maxline = opt.maxline ? parseInt(opt.maxline, 10) : 5;//最大行数

                var _this = this.eq(0).find("ul:first");
                var data = opt.data ? opt.data : [],
                        line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度
                        speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷动速度，数值越大，速度越慢（毫秒）
                        timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒）
                for (var j = 0; j < data.length; j++) {
                    $('#scrollDiv ul').append('<li>' + '<span class="time">' + '[' + data[j].time + ']' + '</span>'
                    + '<span class="type">' + data[j].type + '</span>' + ' ' + '<span class="text">' + data[j].text +
                    '</span>' + '<span class="value">' + data[j].value + '</span>' + '<b class="wValue">' + '(' + data[j].warnValue + ')' + '</b>' + '</li>');
                }
                ;
                var lineH = _this.find("li:first").height(); //获取行高
                if (line == 0) line = 1;
                var upHeight = 0 - line * lineH;
                //滚动函数
                scrollUp = function () {
                    _this.animate({
                        marginTop: upHeight
//                    marginBottom:downHeight
                    }, speed, function () {
                        for (i = 1; i <= line; i++) {
                            _this.find("li:first").appendTo(_this);
                            cyc++;
                            if (cyc >= data.length) cyc = 0;
                        }
                        _this.css({marginTop: 0});
                    });

                };
                scrollDown = function (count) {
                    for (i = 0; i < data.length - count; i++) {
                        _this.find("li:first").appendTo(_this);
                    }
                };


                var timerID;
                //鼠标事件绑定
                $('#scrollDiv').hover(function () {
                            clearInterval(timerID);
                            scrollDown(cyc);
                            cyc = 0;
                            var row = maxline;
                            if (data.length < maxline)
                                row = data.length;
                            if (row == 0) row = 1;
//                            alert(lineH);
                            $('#scrollDiv').css({'overflow-y': 'auto', 'height': row * lineH + 'px'});

                        },
                        function () {
                            timerID = setInterval("scrollUp()", timer);
                            $('#scrollDiv').css({'overflow-y': 'hidden', 'height': '30px'});
                        }).mouseout();
//                $('li').hover(function(){
//                    clearInterval(timerID);
//                   $(this). css({'background-color':'#fff'});
//                },function(){
//                    $(this). css({'background-color':'#000'});
//                }).mouseout();
                // var jumpWorn;//警告弹出框
//                $('#scrollDiv').mouseout(
//
//                        function () {
//
//                        //    $(this).css({'overflow-y': 'hidden', 'height': '30px'});
//                        }
//                );
            }
        })
    })(jQuery);

    $(document).ready(function () {
        $("#scrollDiv").Scroll({
            line: 1,
            data: [
                {time: '刚刚', type: '爆管预警', text: '水厂大门口（进水DN400）', value: '3050', warnValue: '120'},
                {time: '6分钟前', type: '爆管预警', text: '水厂大门口（进水DN400）', value: '3050', warnValue: '120'},
                {time: '9分钟前', type: '爆管预警', text: '水厂大门口（进水DN400）', value: '3050', warnValue: '120'},
                {time: '10分钟前', type: '爆管预警', text: '水厂大门口（进水DN400）', value: '3050', warnValue: '120'},
                {time: '12分钟前', type: '爆管预警', text: '水厂大门口（进水DN400）', value: '3050', warnValue: '120'},
                {time: '15分钟前', type: '爆管预警', text: '水厂大门口（进水DN400）', value: '3050', warnValue: '120'},
                {time: '18分钟前', type: '爆管预警', text: '水厂大门口（进水DN400）水厂大门口（进水DN400）', value: '3050', warnValue: '120'},
                {time: '21分钟前', type: '爆管预警', text: '水厂大门口（进水DN400）', value: '3050', warnValue: '120'},
                {time: '24分钟前', type: '爆管预警', text: '水厂大门口（进水DN400）', value: '3050', warnValue: '120'},
                {time: '28分钟前', type: '爆管预警', text: '水厂大门口（进水DN400）', value: '3050', warnValue: '120'}
            ],
            speed: 200, timer: 1000, maxline: 6
        });
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style type="text/css" id="sty">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #wrap{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            border-radius: 50%;
            margin: 20px auto;
            position: relative;
            transform: rotate(-90deg);
        }
        #wrap ul{
            position: relative;
        }
        #wrap ul li{
            width: 2px;
            height: 6px;
            background: #000;
            position: absolute;
            left: 99px;
            top: 0;
            transform-origin: center 100px;
            -webkit-transform-origin: center 100px;
            -o-transform-origin: center 100px;
            -moz-transform-origin: center 100px;
        }
        #wrap ul li:nth-child(5n){
            height: 10px;
        }
        #wrap .number {
            position: absolute;
            font-size: 14px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            transform: rotate(90deg);
           -webkit-transform: rotate(90deg);
           -o-transform: rotate(90deg);
           -moz-transform: rotate(90deg);
        }
        #con{
            width: 10px;
            height: 10px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            left: 95px;
            top: 95px;
        }
        @keyframes hour {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        #hour{
            width: 70px;
            height: 5px;
            background: #040103;
            border-radius: 15px;
            /*position: absolute;*/
            /*left: 98px;*/
            /*top: 35px;*/
            margin: 98px 0 0 96px;
            transform-origin: 0 5px;
            -webkit-transform-origin: 0 5px;
            -o-transform-origin: 0 5px;
            -moz-transform-origin: 0 5px;
        }
        #min{
            width: 85px;
            height: 3px;
            background: #747474;
            border-radius: 15px;
            margin: -4px 0 0 101px;
            /*position: absolute;*/
            /*left: 98.5px;*/
            /*top: 20px;*/
            transform-origin: 0 3px;
            -webkit-transform-origin: 0 3px;
            -o-transform-origin: 0 3px;
            -moz-transform-origin: 0 3px;
        }
        #sec{
            width: 100px;
            height: 2px;
            background: #ff0c07;
            border-radius: 50%;
            /*position: absolute;*/
            /*left: 98.5px;*/
            /*top: 20px;*/
            margin: -3px 0 0 101px;
            transform-origin: 0px 2px;
            -webkit-transform-origin: 0px 2px;
            -o-transform-origin: 0px 2px;
            -moz-transform-origin: 0px 2px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <ul id="list">
    </ul>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div id="con"></div>
</div>
<script type="text/javascript">
    window.onload=function(){
        var oWrap=document.getElementById('wrap');
        var oList=document.getElementById('list');
        var oSty=document.getElementById('sty');

        var tump='';

        for(var i=0;i<60;i++){
            var aLi=document.createElement('li');
            oList.appendChild(aLi);

            tump+='#wrap ul li:nth-child('+(i+1)+'){-webkit-transform: rotate('+(i+1)*6+'deg);}';
            oSty.innerHTML+=tump;
        }

        var oSec=document.getElementById('sec');
        var oMin=document.getElementById('min');
        var oHour=document.getElementById('hour');
        function time(){
            var date=new Date();
            var s=date.getSeconds();
            var m=date.getMinutes()+(s/60);
            var h=date.getHours()+(m/60);


            oSec.style.transform='rotate('+s*6+'deg)';
            oMin.style.transform='rotate('+m*6+'deg)';
            oHour.style.transform='rotate('+h*30+'deg)';
        }
        time();
        setInterval(time,1000);


        var pointX = 100;
        var pointY = 100;
        var r = 80;
        //TODO step4: 画时钟数字
        function drawNumber() {
            var deg = Math.PI * 2 / 12;//360°
            for (var i = 1; i <= 12; i++) {
                //计算每格的角度
                var angle =deg * i;
                //计算圆上的坐标
                var x = pointX + r * Math.cos(angle);
                var y = pointY + r * Math.sin(angle);
                //创建div,写入数字
                var number = document.createElement('div');
                number.className = 'number';
                number.innerHTML = i;
                //减去自身的一半, 让div的中心点在圆弧上
                number.style.left = x - 10 + 'px';
                number.style.top = y - 10 + 'px';
                //添加到页面
                oWrap.appendChild(number);
            }
        }
        drawNumber();
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片验证码</title>
    <style>
        .input-val {
            width: 200px;
            height: 32px;
            border-radius: 5px;
            border: 1px solid #ddd;
            box-sizing: border-box;
            padding:0 4px;
        }

        #canvas {
            vertical-align: middle;
            text-align: center;
            box-sizing: border-box;
            border: 1px solid #ddd;
            cursor: pointer;
        }

        .btn {
            display: block;
            margin-top: 20px;
            height: 32px;
            width: 100px;
            font-size: 16px;
            color: #fff;
            background-color: #198ef8;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="code">
    <input type="text" value="" placeholder="请输入验证码（不区分大小写）" class="input-val">
    <canvas id="canvas" width="100" height="30"></canvas>
    <button class="btn">确定</button>
</div>
<!--//引入jquery库-->
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script>
    $(function () {
        var showCodeText = "";//随机验证码
        var draw = new Draw({
            sCodeLength: 4,//验证码位数
            sCodeBar: 6,//验证码上显示线条
            sCodeCircle: 60//验证码上显示小点
        });
        showCodeText = draw._render('canvas');
        $("#canvas").on('click', function () {//点击canvas刷新验证码
            showCodeText = draw._render('canvas');
        });
        $(".btn").on('click', function () {
            var val = $(".input-val").val().toLowerCase();
            var num = showCodeText;
            console.log(num);
            if (val == '') {
                alert('请输入验证码！');
            } else if (val == num) {
                alert('提交成功！');
                $(".input-val").val('');
                showCodeText = draw._render('canvas');
            } else {
                alert('验证码错误！请重新输入！');
                $(".input-val").val('');
                showCodeText = draw._render('canvas');
            }
        })
    });
    /**
     *
     * @param options
     *                   预初始化参数
     * @constructor
     *                   构造函数
     */
    function Draw(options) {
        this._init(options);   //执行方法
    }
    /**
     * 原型函数
     * @type {{_init: Function, _render: Function, _randomColor: Function}}
     * _init: Function,
     *                      初始化参数
     *_render: Function,
     *                      渲染函数
     * _randomColor: Function
     *                       随机色函数
     */
    Draw.prototype = {
        _init: function (options) {
            this.sCodeLength = options.sCodeLength || 4;//验证码位数
            this.sCodeBar = options.sCodeBar || 5;//验证码上显示线条
            this.sCodeCircle = options.sCodeCircle || 30;//验证码上显示小点
            this.showNum = options || [];   //参数设置，如果不传参数，则设置默认值
            var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
            this.aCode = sCode.split(",");
        },
        _render: function (ID) {
            let canvas_width = 22 * this.sCodeLength;//宽度随着随机数的长度改变
            let canvas_height = $('#' + ID).height();
            let canvas = document.getElementById(ID);//获取到canvas的对象
            let ctx = canvas.getContext("2d");//获取到canvas画图的环境
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            let showCode = "";//生成的随机验证码
            let aLength = this.aCode.length;//获取到数组的长度
            for (let i = 0; i < this.sCodeLength; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
                let j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                var deg = Math.random() - 0.5; //产生一个随机弧度
                var txt = this.aCode[j];//得到随机的一个内容
                this.showNum[i] = txt.toLowerCase();
                showCode += this.showNum[i];
                let canvasX = 10 + i * 20;//文字在canvas上的x坐标
                let canvasY = 20 + Math.random() * 8;//文字在canvas上的y坐标
                ctx.font = "bold 23px 微软雅黑";
                ctx.translate(canvasX, canvasY);
                ctx.rotate(deg);
                ctx.fillStyle = this._randomColor();
                ctx.fillText(txt, 0, 0);
                ctx.rotate(-deg);
                ctx.translate(-canvasX, -canvasY);
            }
            for (let k = 0; k <= this.sCodeBar; k++) { //验证码上显示线条
                ctx.strokeStyle = this._randomColor();
                ctx.beginPath();
                ctx.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                ctx.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                ctx.stroke();
            }
            for (let r = 0; r <= this.sCodeCircle; r++) { //验证码上显示小点
                ctx.strokeStyle = this._randomColor();
                ctx.beginPath();
                let canvasDotX = Math.random() * canvas_width;
                let canvasDotY = Math.random() * canvas_height;
                ctx.moveTo(canvasDotX, canvasDotY);
                ctx.lineTo(canvasDotX + 1, canvasDotY + 1);
                ctx.stroke();
            }
            //返回值,为了调用的时候验证输入的是否是正确的
            return showCode;
        },
        _randomColor: function () {
            //得到随机的颜色值
            var r, g, b;
            r = Math.floor(Math.random() * 256);
            g = Math.floor(Math.random() * 256);
            b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>滑动验证码</title>
    <style>
        .drag{
            width: 300px;
            height: 40px;
            line-height: 40px;
            background-color: #e8e8e8;
            position: relative;
            margin:0 auto;
        }
        .bg{
            width:40px;
            height: 100%;
            position: absolute;
            background-color: #75CDF9;
        }
        .text{
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
            user-select: none;
        }
        .btn{
            width:40px;
            height: 38px;
            position: absolute;
            border:1px solid #ccc;
            cursor: move;
            font-family: "宋体";
            text-align: center;
            background-color: #fff;
            user-select: none;
            color:#666;
        }
    </style>
</head>
<body>
<div class="drag">
    <div class="bg"></div>
    <div class="text" onselectstart="return false;">请拖动滑块解锁</div>
    <div class="btn">>></div>
</div>
<script>
    //一、定义一个获取DOM元素的方法
    var $ = function(selector){
                return document.querySelector(selector);
            },
            box = $(".drag"),//容器
            bg = $(".bg"),//背景
            text = $(".text"),//文字
            btn = $(".btn"),//滑块
            success = false,//是否通过验证的标志
            distance = box.offsetWidth - btn.offsetWidth;//滑动成功的宽度（距离）
    //二、给滑块注册鼠标按下事件
    btn.onmousedown = function(e){
        //1.鼠标按下之前必须清除掉后面设置的过渡属性
        btn.style.transition = "";
        bg.style.transition ="";
        //说明：clientX 事件属性会返回当事件被触发时，鼠标指针向对于浏览器页面(或客户区)的水平坐标。
        //2.当滑块位于初始位置时，得到鼠标按下时的水平位置
        var e = e || window.event;
        var downX = e.clientX;
        //三、给文档注册鼠标移动事件
        document.onmousemove = function(e){
            var e = e || window.event;
            //1.获取鼠标移动后的水平位置
            var moveX = e.clientX;
            //2.得到鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
            var offsetX = moveX - downX;
            //3.在这里判断一下：鼠标水平移动的距离 与 滑动成功的距离 之间的关系
            if( offsetX > distance){
                offsetX = distance;//如果滑过了终点，就将它停留在终点位置
            }else if( offsetX < 0){
                offsetX = 0;//如果滑到了起点的左侧，就将它重置为起点位置
            }
            //4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
            btn.style.left = offsetX + "px";
            bg.style.width = offsetX + "px";
            //如果鼠标的水平移动距离 = 滑动成功的宽度
            if( offsetX == distance){
                //1.设置滑动成功后的样式
                text.innerHTML = "验证通过";
                text.style.color = "#fff";
                btn.innerHTML = "√";
                btn.style.color = "green";
                bg.style.backgroundColor = "lightgreen";
                //2.设置滑动成功后的状态
                success = true;
                //成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
                btn.onmousedown = null;
                document.onmousemove = null;
                //3.成功解锁后的回调函数
                setTimeout(function(){
                    alert('解锁成功！');
                },100);
            }
        }
        //四、给文档注册鼠标松开事件
        document.onmouseup = function(e){
            //如果鼠标松开时，滑到了终点，则验证通过
            if(success){
                return;
            }else{
                //反之，则将滑块复位（设置了1s的属性过渡效果）
                btn.style.left = 0;
                bg.style.width = 0;
                btn.style.transition = "left 1s ease";
                bg.style.transition = "width 1s ease";
            }
            //只要鼠标松开了，说明此时不需要拖动滑块了，那么就清除鼠标移动和松开事件。
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>小题</title>
</head>
<body>
<script>
    //功能：奇偶数的判断
    //参数：一个数
    //返回值：true:是偶数；false：是奇数；
    function isOuShu(num){
        if(num%2==0){
            return true;
        }else{
            return false;
        }
    }

    //功能：判断一个数是不是3和7的倍数
    //参数：一个数
    //返回值：true:是；false：否

    function isSanAndSeven(num){
        if(num%3==0 && num%7==0){
            return true;//return语句可以终止函数的执行。
        }
        return false;
    }


    //功能：闰年
    //参数：年份
    //返回值：true:是；false：否
    function isLeapYear(year){
        if((year%4==0 && year%100!=0)||(year%400==0)){
            return true;
        }
        return false;
    }


    //1+2+3+……100之和.
    function sumfrom1To100(){
        return sumfromNToM(1,100);
    }

    //1+2+3+……m之和.
    function sumfrom1ToM(m){
        return sumfromNToM(1,m);
    }

    //功能：n到m之间的所有的自然数之和;
    //参数：
    //   参数1：表示起始的数n,
    //   参数2：表示结束的数m
    //返回值：求和的结果，是个数字；
    function sumfromNToM(n,m){
        var sum = 0;
        for(var i=n;i<=m;i++){
            sum=sum+i;
        }
        return sum;
    }

    //功能：求出1-1/2+1/3-1/4+1/5....1/100的和（加奇减偶）。
    //参数：无
    //返回值：表示和的数；
    function sumFrom1To100(){
        var sum = 0;
        for(var i=1;i<=100;i++){
            if(i%2==0){
                sum = sum-1/i;
            }else{
                sum = sum+1/i;
            }
        }
        return sum;
    }


    //功能：求出1-1/2+1/3-1/4+1/5....1/n的和（加奇减偶）。
    //参数：无
    //返回值：表示和的数；

    function sumFrom1ToN(n){
        var sum = 0;
        for(var i=1;i<=n;i++){
            if(i%2==0){
                sum = sum-1/i;
            }else{
                sum = sum+1/i;
            }
        }
        return sum;
    }


    //功能：打星星
    //参数：行数和列数
    //返回值：无

    function printStar(rows,cols){
        for(var i=0;i<rows;i++){//外层循环循环的是行
            //1、打印5个星星
            for(var j=0;j<cols;j++){//内层决定了列数
                document.write("۞");
            }
            //2、换行
            document.write("<br/>");
        }
    }


    //功能：生成4位的验证码
    //参数：无
    //返回值：4个随机数

     function getFourNum(){
     var str="";
     for(var i=0;i<4;i++){
     str += parseInt(Math.random()*10);
     }
     return str;
     }



    function getFourNum(){
        var temp = getCheckNum(4);
        return temp;
    }


    //功能：生成n位的验证码
    //参数：位数n
    //返回值：n个随机数
    function getCheckNum(n){
        var str="";
        for(var i=0;i<n;i++){
            str += parseInt(Math.random()*10);
        }
        return str;
    }




</script>
</body>
</html>

Melody–Zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
demo集合

<!DOCTYPE html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>JavaScript实现的抽奖效果数字跳动版 </title> <meta http-equiv="...
复制链接

扫一扫