HTML
Basic label
1 form type
Please write out the following types of input boxes in turn.
- The type is password, and the default value is "nowcoder"
- The type is the check box and the status is checked
<form>
<input type = "password" value = "nowcoder">
<input type = "checkbox" checked = "checked">
</form>
2 table structure
Please write out a 2-row and 3-column table structure with the table title "nowcoder".
<table>
<caption>nowcoder</caption>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
</table>
3 image label properties
Please write out a picture label with a title attribute and an alternative text attribute.
<img src="" title="picture" alt="picture">
4 open document in new window
Please write out the a label that can open the document in a new window.
<a href="#" target="_blank"></a>
5 custom list
Please write out a custom list whose list item is "nowcoder" and whose content is also "nowcoder".
<dl>
<dt>nowcoder</dt>
<dd>nowcoder</dd>
</dl>
73 bold text
Use a label to display the words "niuke.com" in bold
<strong>Niuke network</strong> <p><strong>Niuke network</strong>,A necessary artifact for programmers</p>
Semantic label
6 semantic label
Use semantic tags to create header tags and include navigation tags.
Note: you only need to fill in the tag structure in the html module, and there is only one header tag and one navigation tag.
<header>
<nav></nav>
</header>
Media label
7 audio media label properties
Please write out the audio media label with control function.
<audio src="#" autoplay loop controls/>
8 video media label properties
Please write out the video media tag with a method event to execute when an error occurs during the media data loading of the video.
<video src="#" autoplay controls onerror="function()"/>
CSS
selector
9 CSS selectors - tag, class, ID selectors
Please set the font color of "red" in the html module to "rgb(255, 0, 0)", "green" to "rgb(0, 128, 0)", "black" to "rgb(0, 0, 0)", and the font size is 20px.
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*Completion code*/
div{
font-size : 20px;
color : rgb(255, 0, 0);
}
.green{
color : rgb(0, 128, 0);
}
#black{
color : rgb(0, 0, 0);
}
</style>
</head>
<body>
<div>gules</div>
<div class='green'>green</div>
<div id='black'>black</div>
</body>
</html>
10 CSS selector -- pseudo class selector
Please set the background color of the second li tag and the fourth li tag in the ul list in the html module to "rgb(255, 0, 0)".
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*Completion code*/
li:nth-child(2n){
background-color:rgb(255,0,0)
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
Or / / odd; Even: even
li:nth-child(even) {
background-color: rgb(255, 0, 0);
}
or
li:nth-child(2) {
background-color: rgb(255, 0, 0);
}
li:nth-child(4) {
background-color: rgb(255, 0, 0);
}
11 CSS selector - pseudo element
Please add a post pseudo element to the div element of the html module. The width and height of the post pseudo element are 20px, and the background color is "rgb(255, 0, 0)".
div::after{
content:"";
width:20px;
height:20px;
background-color:rgb(255, 0, 0);
display:block;
}
Style settings
12 write a circle as required
Please set the div element of the html module as a solid black line with a radius of 50px and a border of 1px.
requirement:
\1. Only one value is set for fillet attribute
\2. Please use px for fillet attribute unit
Note: since the fillet attribute is widely set and can achieve the Title Effect, please write according to the requirements.
div{
width:100px;
height:100px;
border:1px black solid;
border-radius:50px;
}
13 set box width and height
Please set the width and height of div elements with html module class "box" to 100px, with inner spacing of 20px and outer spacing of 10px.
.box{
width:100px;
height:100px;
padding:20px;
margin:10px;
border:1px black solid;
}
74 paragraph identification
Please show the following sentence in the browser in the form of paragraphs - "niuke.com is a professional platform focusing on the learning and growth of programmers."
<p>Niuke.com is a professional platform focusing on the learning and growth of programmers.</p>
75 set text color
Use the embedded style to set all p labels to red text
<style>
p{
color:red
}
</style>
<p>Welcome to niuke.com</p>
<p>Here, we provide you with IT Written interview question bank of famous enterprises</p>
<p>Here, we meet friends with questions</p>
76 Christmas tree
Christmas is coming! Please CSS Make a Christmas tree for your friends~The Christmas tree is described as follows: 1. "topbranch"It is the upper branch and leaf of the Christmas tree. The upper branch and leaf can be realized only through border attribute, left floating and left outer margin. The properties of the border are: width is 100 px,Is a straight line with a color of green((all border colors that are not displayed are transparent) 2. "middleBranch"Is the middle branch and leaf of the Christmas tree. The upper branch and leaf can be realized only through the border attribute. The properties of the border are: width is 200 px,Is a straight line with a color of green((all border colors that are not displayed are transparent) 3. "base"Is the trunk of the Christmas tree, which is centered on the middle branches and leaves only through the left outer margin. The width and height of the trunk are 70 px,200px，Color is gray. be careful: 1. The center of upper branches, leaves and trunk is realized through the left outer margin 2. The properties of borders that are not displayed are transparent (properties) 3. Only through border Property completes all property settings for the border The effects are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.topbranch {
width: 0px;
height: 0px;
/*
* TODO: Upper branch and leaf effect
*/
float:left;
border-top:100px solid transparent;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid green;
margin-left:100px;
}
.middleBranch {
width: 0px;
height: 0px;
/*
* TODO: Medium branch and leaf effect
*/
border-top:200px solid transparent;
border-left:200px solid transparent;
border-right:200px solid transparent;
border-bottom:200px solid green;
}
.base {
/*
* TODO: Trunk effect
*/
width:70px;
height:200px;
background-color:gray;
float:left;
margin-left:165px;
}
</style>
</head>
<body>
<section class="topbranch"></section>
<section class="middleBranch"></section>
<section class="base"></section>
</body>
</html>
layout
14 float and clear float
Please float the div element with class "left" and div element with class "right" to the left on the same line, and clear the float inside the parent div element with class "wrap".
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap {
/*Completion code*/
clear:both;
height:100px;
border:1px solid black;
}
.left {
width: 100px;
height: 100px;
/*Completion code*/
float:left;
display:inline-block;
border:1px solid black;
}
.right {
width: 100px;
height: 100px;
/*Completion code*/
float:left;
display:inline-block;
border:1px solid black;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
15 fixed positioning
Fix the div element with html module class "box" in the upper left corner of the viewport.
.box {
width: 100px;
height: 100px;
/*Completion code*/
position:fixed;
top:0px;
left:0px;
}
16 absolute positioning
Please locate the center of div element with html module class "btn" at the upper right vertex of parent div element with class "wrap".
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap {
width: 100px;
height: 100px;
border: solid 1px black;
/*Completion code*/
position:relative;
}
.btn {
width: 20px;
height: 20px;
text-align: center;
background-color: red;
/*Completion code*/
position:absolute;
right:-10px;
top:-10px;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='btn'>X</div>
</div>
</body>
</html>
The elements in the 17 lines are centered vertically and horizontally
Please set the content of the p element in the html module to be centered vertically and horizontally.
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
p {
width: 800px;
height: 40px;
border: solid 1px black;
/*Completion code*/
line-height:40px;
text-align:center;
}
</style>
</head>
<body>
<p>Niuke.com is a recruitment website integrating pen interview system, question bank, course education, community communication and internal promotion of recruitment.</p>
</body>
</html>
Company
18 CSS units (I)
Please set the width and height of div element with class "box" in html module to 4 times of its own font size.
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.box {
/*Completion code*/
font-size:16px;
height:4em;
width:4em;
border:1px solid black;
}
</style>
</head>
<body>
<div class='box'>The width and height of the box are four times the size of the text</div>
</body>
</html>
19 CSS units (II)
Please set the width and height of the div element of the html module to 4 times the font size of the html root element.
Note: you only need to complete the style content in the css module, and do not modify the html module.
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
div {
/*Completion code*/
width:4rem;
height:4rem;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ES5
data type
20 basic data type detection
Please complete the JavaScript function and return the type of parameter in the form of string.
Note: only the basic data type needs to be detected.
function _typeof(value) {
// Completion code
return typeof(value) + ''
}
21 detecting complex data types
Please complete the JavaScript function and return whether the first parameter belongs to the instance of the second parameter object in the form of Boolean.
// In JS, the typeof operator is often used to judge the type of a variable, but when it is used to judge the reference type variable, no matter what type of variable it is, it will return Object. To this end, instanceof is introduced. instanceof Compared with typeof For example, instanceof Method requires the developer to explicitly confirm that the object is a specific type. Namely instanceof Method used to determine which constructor the reference type belongs to Original link: https://blog.csdn.net/lunahaijiao/article/details/84974355
function _instanceof(left,right) {
// Completion code
return left instanceof right;
}
22 data type conversion
Please complete the JavaScript function and return the splicing result of two numeric parameters in the form of string.
Example:
\1. _splice(223,233) -> "223233"
\2. _splice(-223,-233) -> "-223-233"
function _splice(left,right) {
// Completion code
return String(left) + String(right)
}
function _splice(left,right) {
return left.toString() + right.toString()
}
operator
23 factorial
Please complete the JavaScript function and return the factorial of the numeric parameter.
Note: the parameter is an integer greater than or equal to 0.
function _factorial(number) {
// Completion code
if(number == 1) return 1
let num = 1
for(let i = 1;i <= number;i++){
num *= i
}
return num
}
function _factorial(number) {
// Completion code
if(number == 1) return 1
return number * _factorial(number - 1)
}
24 absolute value
Please complete the JavaScript function and return the absolute value of the numeric parameter.
function _abs(number) {
// Completion code
return number > 0 ? number : -number
}
function _abs(number) {
// Completion code
return Math.abs(number)
}
25 power
Please complete the JavaScript function and return the value whose base is the first parameter and whose power is the second parameter.
function _pow(number,power) {
// Completion code
return Math.pow(number,power)
}
function _pow(number,power) {
// Completion code
if(power === 0) return 1
let num = 1
for(power;power > 0;power--){
num *= number
}
return num
}
26 square root
Please complete the JavaScript function and return the square root of the numeric parameter.
function _sqrt(number) {
// Completion code
return Math.sqrt(number)
}
function _sqrt(number) {
// Completion code
let left = 1,right = number
while(left < right){
let mid = (left + right) >> 1
if(mid * mid == number) return mid
else if(mid * mid < number) left = mid + 1
else right = mid - 1
}
}//Shifting one bit to the right is equivalent to dividing by 2, and shifting n bits to the right is equivalent to dividing by 2 to the nth power.
27 remainder
Please complete the JavaScript function and return the remainder of the numeric parameter divided by 2.
function _remainder(value) {
// Completion code
return value % 2
}
// Method 1: return value%2
// Method 2: return value - (value > > 1) * 2
// Method 3:
while(value > 2){
value >>= 1;
}
return value;
56 array summation
Calculates and returns the sum of all elements in a given array arr
function sum(arr) {
let num = 0
for(let i = 0;i < arr.length;i++){
num += arr[i]
}
return num
}
69 identical
Judge whether val1 and val2 are identical
function identity(val1, val2) {
return val1 === val2
}
70 or operation
Returns the logical or operation result of parameters a and b
function or(a, b) {
return a || b
}
71 and operation
Returns the logical operation result of parameters a and b
function and(a, b) {
return a && b
}
72
describe
Count the occurrence frequency of each character in the string and return an Object. key is the statistical character and value is the occurrence frequency
\1. Do not limit the order of key s
\2. The input string parameter cannot be empty
\3. Ignore white space characters
Example 1
Enter: 'hello world'
Output: {h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1}
function count(str) {
let obj = {}
for(let i = 0;i < str.length;i++){
if(str[i] != ''){
let num = str[i]
if(obj[num] != undefined){
obj[num] += 1
}else{
obj[num] = 1
}
}
}
return obj
}
Process control
28 return weeks
Please complete the JavaScript function and return the week corresponding to the numeric parameter in the form of string.
Example:
\1. _ Getday (1) - > "Monday"
\2. _ Getday (7) - > "Sunday"
function _getday(value) {
// Completion code
let res = ['','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
return res[value]
}
Built in object
29 sort from large to small
Please complete the JavaScript function. It is required to sort the numbers in the array parameters from large to small and return them.
function _sort(array) {
return array.sort(function(a,b){return b - a})
}
30 uppercase string
Please complete the JavaScript function. It is required to convert the string parameter to an uppercase string and return it.
function _touppercase(string) {
return string.toUpperCase()
}
31 object attribute key name
Please complete the JavaScript function and output the key names of each attribute of the object in the form of array.
Example:
\1. _keys({name:'nowcoder',age:7}) -> ['name','age']
Note: only consider the case where the object attributes are original data types.
function _keys(object) {
// Completion code
return Object.keys(object)
}
32 object number
Please complete the JavaScript function and return the numeric parameter in the form of an object.
Example:
\1. typeof number === 'number' -> typeof _numbertoobject(number) === 'object'
function _numbertoobject(number) {
return {number} //Returns a number object {number: number}
}
33 object string
Please complete the JavaScript function and return the string parameter as an object.
function _stringtoobject(string) {
return {string}
}
34 remove spaces at both ends of the string
Please complete the JavaScript function, remove the spaces at both ends of the parameter string and return.
function _trim(string) {
return string.trim() //Intercept the non white space characters in the middle, return a string with the value of this string, and delete any leading and trailing spaces.
}
35 output date
Please complete the JavaScript function and output the "Year Month Day" corresponding to the timestamp parameter in the form of string.
Example:
\1. _date(1631159776311) -> '2021-9-9'
function _date(number) {
// Completion code
let date = new Date(number)
return date.getFullYear() + '-' + (date.getMonth() + 1) + "-" + date.getDate()
}
36 digit rounding
Please complete the JavaScript function and return the integer part of the numeric parameter.
function _int(value) {
//Method 1
return parseInt(value)
//Method 2
return Math.floor(value)
//Method 3
return Number(String(value).split('.')[0])
}
37 array inversion
Please complete the JavaScript function and return after reversing the parameter array.
function _reverse(array) {
// Completion code
//1.
//return array.reverse()
//2.
let left = 0,right = array.length - 1
while(left < right){
[array[left],array[right]] = [array[right],array[left]]
left++
right--
}
return array
}
38 array to string
Please complete the JavaScript function and convert the parameter array to string output.
Example:
\1. _join([1,'2',3]) -> "123"
Note: only one-dimensional array needs to be considered and the data type is the original data type.
function _join(array) {
return array.join('')
}
39 array maximum
Please complete the JavaScript function. It is required to find the maximum value in the array parameter and return it.
Note: the array contains only numbers.
function _max(array) {
//return Math.max(...array)
var max = array[0]
for(let i = 1;i < array.length;i++){
if(array[i] > max){
max = array[i]
}
}
return max
}
40 search numbers
Please complete the JavaScript function and return whether the string parameter contains numbers in the form of boolean.
function _search(string) {
var n = string.search(/\d/);
if(n == -1){
return false;
}else{
return true;
}
}
function _search(string) {
for(let i of string){
if(isNaN(i) === false){ //isNaN determines whether the constant is a number. If it is a number, it returns false. If not, it returns true;
return true
}
}
}
41 head insert element
Please complete the JavaScript function. It is required to insert the second parameter into the head of the first parameter array and return it in the form of array.
function _unshift(array,value) {
//1.
//return array.unshift(value)
//2.
for(let i = array.length;i > 0;i--){
array[i] = array[i - 1]
}
array[0] = value
return array
}
42 tail insert element
Please complete the JavaScript function. It is required to insert the second parameter into the tail of the first parameter array and return it in the form of array.
function _push(array,value) {
array.push(value)
return array
}
43 js- location lookup
Please complete the JavaScript function and return the first index value of the second parameter in the first parameter array in the form of numbers.
Note: if the target value does not exist in the array, - 1 is returned.
function _indexof(array,value) {
return array.indexOf(value)
}
function _indexof(array,value) {
for(let i = 0;i < array.length;i++){
if(array[i] === value){
return i
}
}
return -1
}
44 rounding down
Please complete the JavaScript function and return the result of rounding down numeric parameters in the form of numbers.
function _floor(number) {
return Math.floor(number)
}
45 integer inversion
Please complete the JavaScript function and output the integer parameter after inversion.
Example:
\1. _reverse(0) -> 0
\2. _reverse(233) -> 332
\3. _reverse(-223) -> -322
function _reverse(number) {
return parseInt(String(number).split('').reverse().join(''))
}
46 string search
Please complete the JavaScript function and return the string in the form of boolean. Whether the first parameter contains the second parameter.
function _search(string,value) {
//1.
return string.includes(value)
//2.
//return string.indexOf(value) === -1 ? false : true
}
57 removing elements from an array
Remove all elements in the array arr with values equal to item. Do not modify the array arr directly. The result returns a new array
function remove(arr, item) {
let res = []
for(let i = 0;i < arr.length;i++){
if(arr[i] !== item){
res.push(arr[i])
}
}
return res
}
58 removing elements from an array
describe
Remove all elements in the array arr whose value is equal to item, operate directly on the given arr array, and return the result array
Example 1
Input: [1, 2, 2, 3, 4, 2, 2], 2
Output: [1, 3, 4]
function removeWithoutCopy(arr, item) {
for(let i = 0;i < arr.length;i++){
if(arr[i] == item){
arr.splice(i,1)
i--
}
}
return arr
}
59 add element
describe
Add the element item at the end of array arr. Do not modify the array arr directly. The result returns a new array
Example
Input: [1, 2, 3, 4], 10
Output: [1, 2, 3, 4, 10]
function append(arr, item) {
//1.
return [...arr,item]
//2.
let res = []
for(let i = 0;i < arr.length;i++){
res[i] = arr[i]
}
res.push(item)
return res
}
60 delete the last element of the array
describe
Deletes the array arr last element. Do not modify the array arr directly. The result returns a new array
Example 1
Input: [1, 2, 3, 4]
Output: [1, 2, 3]
function truncate(arr) {
let res = []
for(let i = 0;i < arr.length - 1;i++){
res.push(arr[i])
}
return res
}
61 add element
describe
Add the element item at the beginning of array arr. Do not modify the array arr directly. The result returns a new array
Example 1
Input: [1, 2, 3, 4], 10
Output: [10, 1, 2, 3, 4]
function prepend(arr, item) {
let res = []
res.push(item)
for(i = 0;i < arr.length;i++){
res.push(arr[i])
}
return res
}
62 delete the first element of the array
Deletes the first element of the array arr. Do not modify the array arr directly. The result returns a new array
function curtail(arr) {
let res = []
for(let i = 1;i < arr.length;i++){
res.push(arr[i])
}
return res
}
63 array merge
Merge array arr1 and array arr2. Do not modify the array arr directly. The result returns a new array
function concat(arr1, arr2) {
let res = []
for(let i = 0;i < arr1.length;i++){
res.push(arr1[i])
}
for(let i = 0;i < arr2.length;i++){
res.push(arr2[i])
}
return res
}
64 add element
describe
Add the element item at the index of array arr. Do not modify the array arr directly. The result returns a new array
Example 1
Input: [1, 2, 3, 4], 'z', 2
Output: [1, 2, 'z', 3, 4]
function insert(arr, item, index) {
let res = []
for(let i = 0;i < arr.length;i++){
if(i == index){
res.push(item)
}
res.push(arr[i])
}
return res
}
65 quadratic
describe
Find the quadratic power for each element in the array arr. Do not modify the array arr directly. The result returns a new array
Example 1
Input: [1, 2, 3, 4]
Output: [1, 4, 9, 16]
function square(arr) {
let res = []
for(let i = 0;i < arr.length;i++){
res.push(arr[i] * arr[i])
}
return res
}
66 find element location
describe
In the array arr, find all positions where the element with the value equal to item appears
Example 1
Input: [a ',' b ',' c ','d', 'e', 'f', 'a', 'b', 'c'] 'a'
Output: [0, 6]
function findAllOccurrences(arr, target) {
let res = []
for(let i = 0;i < arr.length;i++){
if(arr[i] === target){
res.push(i)
}
}
return res
}
67 avoid global variables
There are global variables in the given js code, please fix it
function globals() {
let myObject = { //If you declare a variable directly without using var/let, the variable is a global variable.
name : 'Jory'
};
return myObject;
}
68 use parseInt correctly
describe
Modify the calling method of parseInt in js code to make it pass all test cases
Example 1
Enter: '12'
Output: 12
Example 2
Enter: '12px'
Output: 12
Example 3
Input: '0x12'
Output: 0
function parse2Int(num) {
return parseInt(num,10); If you encounter non numeric characters, you will ignore all the following characters
}
function
47 function - parameter object
Please complete the JavaScript function and return its parameter pseudo array object.
function getArguments (a,b,c) {
return arguments
//return [...arguments]
}
We can use arguments to call parameters without confusing the parameter names between different functions. In addition, in order to force (code integrity), we can also use arguments to judge whether the current number of incoming parameters is consistent with the number we need.
function add() {
if( arguments.length == 2 ){
return arguments[0] + arguments[1];
}else{
return 'Illegal parameter passed in';
}
}
console.log( add(2,3) );
console.log( add(1,2,3) );
arguments also has an attribute called callee. This attribute represents a reference to the current function. In short, this attribute stores the code of the function we call
Some wonderful uses of arguments
1. Use arguments to overload the method
Next, we use the arguments object to implement a function for adding parameters. No matter how many parameters are passed in, the passed in parameters are added and returned.
function add() {
var len = arguments.length,
sum = 0;
for(;len--;){
sum += arguments[len];
}
return sum;
}
console.log( add(1,2,3) ); //6
console.log( add(1,3) ); //4
console.log( add(1,2,3,5,6,2,7) ); //26
because js It is a weakly typed language without overload mechanism. When we rewrite a function, the original function will be directly overwritten. Here we can use it arguments，To determine the type and quantity of arguments passed in, perform different operations, and then return different values.
2. Use arguments Callee implementation recursion
Let's take a look at how we implemented recursion before. This is a function that settles factorials
function factorial(num) {
if(num<=1) {
return 1;
}else {
return num * factorial(num-1);
}
}
But when this function becomes an anonymous function, we can use callee to recurse this function.
function factorial(num) {
if(num<=1) {
return 1;
}else {
return num * arguments.callee(num-1);
}
}
Although this method is easy to use, it is worth noting, ECMAScript4 In order to limit js Flexibility, let js Become strict and add a strict mode. In the strict mode, we are prohibited from using it var To declare a global variable directly. Of course, this is not the point. The point is arguments.callee This attribute is also prohibited. But it's not a thing, ES6 We have added a lot of easy-to-use variable declaration methods and new syntax sugar. As a fashionable front end, we need to learn some quickly ES6 New grammar. -------- Original link: https://blog.csdn.net/qq_16339527/article/details/53231725
this
48 this point
Please complete the JavaScript function so that the fn function in the obj object returns the sum of the a attribute and the b attribute in the object.
var obj = {
a: 1,
b: 2,
fn: function(){
// Completion code
return this.a + this.b
}
}
WebAPI
Element operation
49 JS dynamic node creation
Please complete the JavaScript function and create the li element according to the parameter array.
requirement:
\1. The number of Li elements is the same as the length of the array
\2. The content of the Li element is each element in the array
\3. Insert all li elements created into ul
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<ul></ul>
</body>
<script type="text/javascript">
function createLi(array){
// Completion code
let ul = document.querySelector('ul');
for(let i = 0;i < array.length;i++){
let lis = document.createElement('li');
lis.innerHTML = array[i];
ul.appendChild(lis);
}
}
</script>
</html>
50 get element by ID
Please complete the JavaScript function, get the second li element under the ul tag in the html module according to the id and return it.
function getLI(id){
return document.getElementById(id)
}
51 JS modify element content
Please complete the JavaScript function and change the content of div element with class "box" to "welcome to Niuke".
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<div class='box'></div>
</body>
<script type="text/javascript">
function modifyText(){
// Completion code
document.querySelector('.box').innerText = 'Welcome to niuke.com'
}
</script>
</html>
Binding event
52 prevent bubbling events
Please complete the JavaScript function. It is required that the ul event will not be triggered when clicking the li element.
Note: you need to get the li element yourself.
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<ul>
<li>nowcoder</li>
</ul>
</body>
<script type="text/javascript">
// Completion code
let li = document.getElementsByTagName('li')[0]
li.onclick = function(e){
e.stopPropagation()
}
</script>
</html>
53 block default events
Please complete the JavaScript function. It is required that the check box with id "checkbox" will not be unchecked.
Note: you need to get the input element yourself.
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<form>
<label>Niuke will accompany you</label>
<input id="checkbox" type="checkbox" checked />
</form>
</body>
<script type="text/javascript">
// Completion code
//1.
let inp = document.querySelector('input');
inp.addEventListener('click', function (e) {
e.preventDefault()
})
//2.
let chbox = document.getElementById('checkbox');
chbox.onclick = (e) => e.preventDefault()
</script>
</html>
Operation address bar
54 url address
Please complete the JavaScript function and implement a function to return the current url of the page.
function getUrlHref (){
return window.location.href
}
window.location Objects may not be window Prefix writing. Some examples: window.location.href Returns the of the current page href (URL) window.location.hostname return web Domain name of the host window.location.pathname Returns the path or file name of the current page window.location.protocol Return used web Agreement( http: or https:) window.location.assign Load new document
Comprehensive practice
55 click the button to hide the element
Please complete the JavaScript code to realize the close button function of a box.
requirement:
\1. Locate the center point of div element with class "btn" at the top right vertex of div element with class "box"
\2. Center the content "X" vertically and horizontally in the div element with class "btn"
\3. Click the "X" button to hide the div element whose class is "box"
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.box {
width: 100px;
height: 100px;
border: solid 1px black;
/*Completion code*/
position: relative;
}
.btn{
width: 20px;
height: 20px;
background-color: red;
/*Completion code*/
position: absolute;
top: -10px;
right: -10px;
line-height:20px;
text-align: center;
}
</style>
</head>
<body>
<div class='box'>
<div class='btn'>X</div>
</div>
<script type="text/javascript">
var btn = document.querySelector('.btn');
var box = document.querySelector('.box');
btn.onclick = function(){
// Completion code
box.style.display = 'none'
}
</script>
</body>
</html>
summary
Here is a summary of the article:
The above is the content of nk front-end article - zero foundation. This article only briefly introduces the use of common tags and functions, which are recorded here, and more front-end topics will be sorted out later.