Javascript CSS：在Firefox的放大打印预览中，东西会移动
第页：（） 它是一个文件中的所有内容（CSS、JavaScript和HTML）：Javascript CSS：在Firefox的放大打印预览中，东西会移动,javascript,html,css,firefox,printing,Javascript,Html,Css,Firefox,Printing,第页：（） 它是一个文件中的所有内容（CSS、JavaScript和HTML）： <!DOCTYPE html> <!-- Copyright (c) 2016 Alf P. Steinbach. Boost 1.0 license. --> <html> <head> <meta charset="utf-8"> <title>Lapper for «loops» gruppeøve
<!DOCTYPE html>
<!-- Copyright (c) 2016 Alf P. Steinbach. Boost 1.0 license. -->
<html>
<head>
<meta charset="utf-8">
<title>Lapper for «loops» gruppeøvelse i praktisk regning</title>
<!-- link rel="stylesheet" href="style.css" -->
<style>
* { font: 10pt sans-serif; }
body { margin: 0; padding: 0; background-color: white; }
h1
{
padding-left: 14px; padding-top: 0; padding-bottom: 0.5em; padding-right: 0;
margin-top: 0; margin-bottom: 0;
background-color: lightGray;
font-size: xx-large; font-style: italic; color: #A0B0B0;
}
div#content
{
margin: 0;
padding-left: 0; padding-right: 0;
position: absolute; width: 100%;
}
div#input-area
{
left: 0; right: -0;
padding-left: 14px; padding-right: 14px;
padding-top: 0.5em; padding-bottom: 0.5em;
margin-left: 0; margin-right: 0;
background-color: #F0F0F0;
}
div#notes-container
{
left: 0; right: -0;
padding-left: 14px; padding-right: 14px;
padding-top: 0.5em; padding-bottom: 0.5em;
margin-left: 0; margin-right: 0;
/*display: none;*/
}
input.Number-input
{
width: 5em;
}
.Access-key
{
text-decoration: underline;
}
div.Note
{
margin-top: 0px; margin-right: 12px;
margin-bottom: 8px; margin-left: 0px;
padding-left: 2em; padding-right: 2em;
padding-top: 1em; padding-bottom: 0.5em;
background-color: #FFFFB0;
width: 15em;
overflow: hidden;
border-radius: 1em;
border: 1px gray solid;
display: inline-block;
}
div.Note-figure
{
float: right; font-size: 4em; color: #D0E0E0;
padding: 0px; margin: 0px; vertical-align: top;
transform: rotate(-7deg);
border-radius: 0.5em;
background-color: white;
}
</style>
<script>
function item( id )
{
return document.getElementById( id );
}
function generate()
{
const n_notes = 11;
const operand = parseInt( item( "fixed-operand" ).value );
const operation = item( "operation" ).value; // +, *
const start_number = (operation == "+"? 0 : 1);
console.log( "Generate" )
var container = item( "notes-container" );
var collection = item( "notes-collection" );
if( collection !== null )
{
collection.remove();
collection = null;
}
var message = document.createTextNode("Genererer…");
container.appendChild( message );
collection = document.createElement( "div" );
collection.id = "notes-collection";
var template = item( "note-template" )
console.log( "template = " + template )
var current = start_number;
for( let i = 0; i < n_notes; ++i )
{
let note = template.cloneNode( true );
note.style.display = "inline-block";
let note_has = note.querySelector( "#note-has" );
note_has.innerHTML = "Jeg har " + current.toString() + ".";
let note_seeking = note.querySelector( "#note-seeking" );
let display_op = (operation == "+"? " + " : "∙");
note_seeking.innerHTML = "Hvem har " + current + display_op + operand + "?";
if( i == n_notes - 1 ) { note_seeking.innerHTML = "Siste tall!"; }
let figure = note.querySelector( "#figure" );
switch( operation )
{
case "+": figure.innerHTML = i + "∙" + operand; break;
case "*": figure.innerHTML = operand + "↑" + i; break;
}
collection.appendChild( note );
switch( operation )
{
case "+": current += operand; break;
case "*": current *= operand; break;
}
}
message.remove();
container.appendChild( collection );
}
function explanation_of( op )
{
switch( op )
{
case "+": return "dette gir en gangetabell";
case "-": return "dette gir en baklengs gangetabell";
case "*": return "dette gir en potenstabell";
case "/": return "dette gir en baklengs potenstabell";
}
}
function update_explanation()
{
item( "operation-explanation" ).innerHTML =
"(" + explanation_of( item( "operation" ).value ) + ").";
}
function on_command_generate()
{
generate();
}
function on_operation_changed()
{
update_explanation();
}
function on_document_loaded()
{
item( "title-header" ).innerHTML = document.title;
item( "operation" ).value = "+";
update_explanation();
generate();
}
</script>
</head>
<body onload="on_document_loaded()">
<h1 id="title-header">asdasd</h1>
<div id="content">
<div id="input-area">
<select id="operation" onchange="on_operation_changed();">
<option value="+">+ (addisjon)</option>
<option value="*">* (multiplikasjon)</option>
</select>
med fast operand
<input id="fixed-operand" type="number"
class="Number-input"
alt="Det faste tallet i utregningene"
value="2"
min="1"
max="10"
>
<span id="operation-explanation"></span>
<button onclick="on_command_generate();" accesskey="g">
<span class="Access-key">G</span>enerér
</button>
</div> <!-- input-area -->
<div id="notes-container">
<div id="note-template" class="Note" style="display:none">
<div id="figure" class="Note-figure">
5∙7
</div>
<div style="position: absolute">
<span id="note-has">Jeg har 35</span>
<br/>
<br/>
<span id="note-seeking">Hvem har 35 + 7?</span>
</div>
</div>
<div id="notes-collection">
</div> <!-- notes-collection -->
<div> <!-- notes-container -->
</div> <!-- content -->
</body>
</html>
“循环”gruppeøvelse i praktisk记录的Lapper
*{font:10pt无衬线；}
正文{margin:0；padding:0；背景色：白色；}
h1
{
左侧填充：14px；顶部填充：0；底部填充：0.5em；右侧填充：0；
页边距顶部：0；页边距底部：0；
背景颜色：浅灰色；
字体大小：xx大号；字体样式：斜体；颜色：#A0B0；
}
分区内容
{
保证金：0；
左填充：0；右填充：0；
位置：绝对；宽度：100%；
}
div#输入区
{
左：0；右：-0；
左侧填充：14px；右侧填充：14px；
顶部填充：0.5em；底部填充：0.5em；
左边距：0；右边距：0；
背景色：#f0；
}
div#notes容器
{
左：0；右：-0；
左侧填充：14px；右侧填充：14px；
顶部填充：0.5em；底部填充：0.5em；
左边距：0；右边距：0；
/*显示：无*/
}
输入。数字输入
{
宽度：5em；
}
.访问密钥
{
文字装饰：下划线；
}
分区注释
{
上页边距：0px；右页边距：12px；
底部边距：8px；左侧边距：0px；
左侧填充：2米；右侧填充：2米；
填料顶部：1米；填料底部：0.5米；
背景色：#FFFFB0；
宽度：15em；
溢出：隐藏；
边界半径：1米；
边框：1px灰色实体；
显示：内联块；
}
分区注释-图
{
浮动：右；字体大小：4em；颜色：#d0e0；
填充：0px；边距：0px；垂直对齐：顶部；
变换：旋转（-7度）；
边界半径：0.5em；
背景色：白色；
}
功能项（id）
{
返回文档.getElementById（id）；
}
函数生成（）
{
常数n_notes=11；
常量操作数=parseInt（项（“固定操作数”）。值）；
常量操作=项（“操作”）.value；//+*
常量起始值=（操作=“+”？0:1）；
console.log（“生成”）
var容器=项目（“票据容器”）；
var集合=项目（“票据集合”）；
if（集合！==null）
{
collection.remove（）；
集合=空；
}
var message=document.createTextNode（“Genererer…”）；
container.appendChild（消息）；
collection=document.createElement（“div”）；
collection.id=“notes collection”；
var模板=项目（“注释模板”）
console.log（“template=“+template”）
无功电流=启动编号；
for（设i=0；idiv.Note
{
margin-top: 0px; margin-right: 12px;
margin-bottom: 8px; margin-left: 0px;
padding-left: 2em; padding-right: 2em;
padding-top: 1em; padding-bottom: 0.5em;
background-color: #FFFFB0;
width: 15em;
overflow: hidden;
border-radius: 1em;
border: 1px gray solid;
display: inline-block;
position: relative;
}
div.Note-text
{
background-color: transparent;
position: absolute; z-index: 1;
}
div.Note-figure
{
float: right; font-size: 4em; color: #D0E0E0;
padding: 0px; margin: 0px; vertical-align: top;
transform: rotate(-7deg);
border-radius: 0.5em;
background-color: white;
}