小编use*_*449的帖子

在选定的选项更改上显示和隐藏html元素

在JSP页面中,我有一个下拉列表.当选择列表的第一个元素时,我希望在单击时显示文本区域.我是Javascript/Jquery的新手,所以我显然在函数中缺少一些东西(文本区域永远不会出现).希望有人能提供帮助.

这是HTML:

<tr class="odd gradeX">
    <td class="col-lg-3">
        <div>
            <label>Show text area</label>
            <select id="show" class="form-control" name="show_text_area" onchange="change()">
                <option value="1">YES</option>
                <option value="0">NO</option>
            </select>

        </div>
    </td>
    <td class="col-lg-3">
        <div>
            <label>Text area</label>
            <textarea id="text_area" class="form-control" type="text" name="text_area" placeholder="Write something" rows="5" cols="50" style="display: none"></textarea>
        </div>
    </td>
</tr>

Run Code Online (Sandbox Code Playgroud)

这是JSP上的函数:

<script> function change() {
    var selectBox = document.getElementById("show");
    var selected = selectBox.options[selectBox.selectedIndex].value;
    var textarea = document.getElementById("text_area");
    if(selected === '1'){
        textarea.show();
    }
    else{
        textarea.hide();
    }
});</script>

Run Code Online (Sandbox Code Playgroud)

html javascript jquery jsp

use*_*449

2015 01-13

8
推荐指数

1
解决办法

5万
查看次数

在画布HTML5上绘制视频

我正试图在画布上画一个视频.为了实现这一点,我在Javascript中捕获onMouseDown和onMouseUp事件以获取每个事件的x和y坐标(我需要在画布内设置视频的位置,宽度和高度).

因此,每次我在画布上绘制视频时,我应该停止之前的创建,并且必须播放新的视频.两个问题:

1)视频不播放(该功能仅绘制第一帧),但他的音频确实如此

2)我怎样才能让之前绘制的视频停止？

演示:http://jsfiddle.net/e3c3kore/

<body>
    <canvas id="canvas" width="800" height="600"></canvas>
</body>



var canvas, context, xStart, yStart, xEnd, yEnd;

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", mouseDown);
canvas.addEventListener("mouseup", mouseUp);

function mouseDown(e) {
    xStart = e.offsetX;
    yStart = e.offsetY;
}

function mouseUp(e) {
    xEnd = e.offsetX;
    yEnd = e.offsetY;
    if (xStart != xEnd && yStart != yEnd) {
    var video = document.createElement("video");
                        video.src = "http://techslides.com/demos/sample-videos/small.mp4";
                        video.addEventListener('loadeddata', function() {
                            video.play();
                            context.drawImage(video, xStart, yStart, xEnd-xStart, yEnd-yStart);
                        });
    }
}

Run Code Online (Sandbox Code Playgroud)

演示:http …

javascript html5 canvas

use*_*449

lucky-day

6
推荐指数

2
解决办法

1万
查看次数