2024年08月19日

input选中的常见操作场景（input默认选中）

1、form表单序列化形式

//选中的列，进行数据导出
html布局：
<form id="infoTableForm">
<input type="checkbox" class="choose-input" name="checked[]" value="24">
</form>
<a href="javascript:void(0);" data-url="/admin/export"
class="js-checkdata">导出选中数据</a>

//相关js处理
 $html.off('click','.js-checkdata').on('click','.js-checkdata',function(){
   var $self = $(this);
   $self.attr('href',$self.attr('data-url')+"?"+$('#infoTableForm').serialize());
 });

//获取选中的元素，用数组的形式存起来。
var tmp=[];
 $('.choose-input:checked').each(function () {
     tmp.push($(this).val());
 });

2024年08月19日

无聊了?玩玩这个任意摧毁破坏网页的小游戏吧!

【复玥网节日破坏小飞机[1]】是托管在复玥网上的一个脚本。在任意网页可以插入该脚本，然后就可以召唤出一个小飞机。飞机具有破坏网页的功能。在当前网页上生成一个小飞机后，你能：

2024年08月19日

基于HTML5打造的一款别踩白板小游戏

背景简介

2024年08月19日

JS原生练习题:第六课1~3节（原生js操作数组的方法）

第一节：完美拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1) 完美拖拽</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .wrap{
            width: 300px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -100px 0 0 -150px;
            border: 2px solid black;
        }
        h1{
            text-align: right;
            height: 30px;
            border-bottom: 2px solid black;
            line-height: 30px;
            font-size: 14px;
        }
        a{
            cursor: pointer;
        }
        ul{
            padding: 20px;
        }
        li{
            line-height: 30px;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <h1><a>点击可回放拖拽轨迹</a></h1>
    <ul>
        <li>Drag:false</li>
        <li>offsetTop:</li>
        <li>offsetLeft:</li>
    </ul>
</div>
<script>
    window.onload = function () {
        var isBox = document.getElementsByClassName("wrap")[0];
        var isBack = document.getElementsByTagName("a")[0];
        var isCon = document.getElementsByTagName("li");
        var drag = false,isNum = [],time = null;
        isCon[1].innerHTML = "offsetTop:" + isBox.offsetTop;
        isCon[2].innerHTML = "offsetLeft:" + isBox.offsetLeft;
        isBox.onmousedown = function () {
            drag = true;
            isCon[0].innerHTML = "Drag:" + drag;
        };
        document.onmouseup = window.onblur = isBox.onlosecapture = function () {
            drag = false;
            isCon[0].innerHTML = "Drag:" + drag;
        };
        document.onmousemove = function (event) {
            //不拖拽时事件不触发
            if (!drag) {return false;}
            // 获取视口属性值
            var isEvent = event || window.event;
            var boxLeft = isEvent.clientX;
            var boxTop = isEvent.clientY;
            var rightLimit = document.documentElement.clientWidth - isBox.offsetWidth;
            var bottomLimit = document.documentElement.clientHeight - isBox.offsetHeight;
            //拖拽并限制宽高
            isBox.style.left = boxLeft + 150 + 'px';
            (rightLimit <= isBox.offsetLeft) && (isBox.style.left = rightLimit + 150 + 'px');
            (isBox.offsetLeft <= 0) && (isBox.style.left = boxLeft + 150 + 'px');
            isBox.style.top = boxTop + 100 + 'px';
            (bottomLimit <= isBox.offsetTop) && (isBox.style.top = bottomLimit + 100 + 'px');
            (isBox.offsetTop <= 0) && (isBox.style.top = 100 + 'px');
            //输出宽高，并计入宽高
            isCon[1].innerHTML = "offsetTop:" + isBox.offsetTop;
            isCon[2].innerHTML = "offsetLeft:" + isBox.offsetLeft;
            isNum.push([isBox.offsetTop,isBox.offsetLeft]);
            return false
        };
        //拖拽回放
        isBack.onclick = function () {
          clearInterval(time);
          time = setInterval(function () {
             var num = isNum.pop();
              if (isNum.length >= 1) {
                  isBox.style.top = num[0] + 100 + 'px';
                  isBox.style.left = num[1] + 150 + 'px';
                  isCon[1].innerHTML = "offsetTop:" + isBox.offsetTop;
                  isCon[2].innerHTML = "offsetLeft:" + isBox.offsetLeft;
              }else {
                  clearInterval(time);
              }
          }, 30);
        }
    }
</script>
</body>
</html>

2024年08月19日

JavaScript基础系列（javascript的基础类型）

JavaScript基础系列

JavaScript基础系列

JavaScript是一种基于对象和事件驱动的客户端脚本语言。

JavaScript的注释

2024年08月19日

javascript超长知识归纳总结（js相关知识）

基本概念

javascript简称js，是一种脚本语言，用来操作HTML中的节点，产生动态效果。包括三大模块。

ECMAScript：

2024年08月19日

激流勇进（激流勇进作文300字）

欢迎来到程序小院

2024年08月19日

AdminLTE3 右侧界面使用TAB加载其他页面

HTML

<!-- Content Wrapper. Contains page content -->
<section class = "content-header">
    <div class = "container-fluid">
        <div class = "row mb-2">
            <div class = "col-sm-6">
                <h1>Inbuilding Analyse-Basic Setup</h1>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class = "content">
    <div class = "container-fluid">
        <div class = "row">
            <div class = "col-md-12">
                <div class = "card">
                    <div class = "card-header p-2">
                        <ul class = "nav nav-tabs">
                            <li class = "nav-item"><a class = "nav-link active" href = "javascript:void(0)"
                                                      data-toggle = "tab"
                                                      link = "child_page/inb_basic_task.html">Task Maintaince</a></li>//默认加载的页面a class里要加active
                            <li class = "nav-item"><a class = "nav-link" href = "javascript:void(0)" data-toggle = "tab"
                                                      link = "链接1">Coverage</a>
                            </li>
                            <li class = "nav-item"><a class = "nav-link" href = "javascript:void(0)" data-toggle = "tab"
                                                      link = "链接2">Sort Maintaince</a>
                            </li>
                            <li class = "nav-item"><a class = "nav-link" href = "javascript:void(0)" data-toggle = "tab"
                                                      link = "链接3">H/C Identify</a>
                            </li>
                            <li class = "nav-item"><a class = "nav-link" href = "javascript:void(0)" data-toggle = "tab"
                                                      link = "链接4">Report List</a>
                            </li>

                        </ul>
                    </div><!-- /.card-header -->
                    <div class = "card-body">
                        <div class = "tab-content">
                            <div class = "active tab-pane" id = "pane">//这里放TAB加载的页面
                            </div>
                            <!-- /.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                    </div><!-- /.card-body -->
                </div>
                <!-- /.nav-tabs-custom -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>

2024年08月19日

Python 为什么没有 void 关键字?（为什么python没有idle）

作者 | 豌豆花下猫

来源 | Python猫

void 是编程语言中最常见的关键字之一，从字面上理解，它是“空的、空集、空白”的意思，最常用于表示函数的一种返回值类型。

维基百科上有一个定义：

The void type, in several programming languages derived from C and Algol68, is the type for the result of a function that returns normally, but does not provide a result value to its caller.

2024年08月19日

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第四节)

首先，更正一下上一章中的一个小错误，就是在index.jsp中，banner部分没有添加结束的标签,加上去就OK了，我也是完善页面的时候发现的。

另外，index.jsp中引入的jQuery也需要换成本地的。

<< < 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 > >>

四时宝库

程序员的知识宝库

input选中的常见操作场景（input默认选中）

1、form表单序列化形式

无聊了?玩玩这个任意摧毁破坏网页的小游戏吧!

基于HTML5打造的一款别踩白板小游戏

背景简介

JS原生练习题:第六课1~3节（原生js操作数组的方法）

第一节：完美拖拽

JavaScript基础系列（javascript的基础类型）

JavaScript基础系列

javascript超长知识归纳总结（js相关知识）

基本概念

激流勇进（激流勇进作文300字）

AdminLTE3 右侧界面使用TAB加载其他页面

Python 为什么没有 void 关键字?（为什么python没有idle）

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第四节)